refactor: use inline elements

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -11,8 +11,6 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import ProjectCreateForm from './ProjectCreateForm';
 import ProjectList from './ProjectList';
 
-import style from './ProjectPanel.module.scss';
-
 export default function ManageProjects() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [error, setError] = useState('');
@@ -70,7 +68,7 @@ export default function ManageProjects() {
       <Panel.Card>
         <Panel.SubHeader>
           Manage projects
-          <div className={style.headerButtons}>
+          <Panel.InlineElements>
             <Button
               variant='ontime-subtle'
               onClick={handleSelectFile}
@@ -89,7 +87,7 @@ export default function ManageProjects() {
             >
               New
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         {error && <Panel.Error>{error}</Panel.Error>}
         <Panel.Divider />

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -69,14 +69,14 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
       <Panel.Title>
         Create new project
-        <div className={style.createActionButtons}>
+        <Panel.InlineElements>
           <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
             Cancel
           </Button>
           <Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
-            Create
+            Create project
           </Button>
-        </div>
+        </Panel.InlineElements>
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
       <Panel.Section className={style.innerColumn}>

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -100,7 +100,7 @@ export default function ProjectData() {
       <Panel.Card>
         <Panel.SubHeader>
           Project data
-          <div className={style.headerButtons}>
+          <Panel.InlineElements>
             <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
               Revert to saved
             </Button>
@@ -113,7 +113,7 @@ export default function ProjectData() {
             >
               Save
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>

apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx

@@ -45,7 +45,7 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel }: Pr
         autoComplete='off'
         {...register('filename', { required: true })}
       />
-      <div className={style.actionButtons}>
+      <Panel.InlineElements relation='inner'>
         <Button onClick={onCancel} size='sm' variant='ontime-ghosted' disabled={isSubmitting}>
           Cancel
         </Button>
@@ -58,7 +58,7 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel }: Pr
         >
           {action}
         </Button>
-      </div>
+      </Panel.InlineElements>
     </form>
   );
 }

apps/client/src/features/app-settings/panel/project-panel/ProjectListItem.tsx

@@ -130,7 +130,7 @@ export default function ProjectListItem({
           <>
             <td className={style.containCell}>{filename}</td>
             <td>{current ? 'Currently loaded' : new Date(updatedAt).toLocaleString()}</td>
-            <td className={style.actionButton}>
+            <td>
               <ActionMenu
                 current={current}
                 filename={filename}

apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx

@@ -75,7 +75,7 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
     <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
       <Panel.Title>
         Merge {`"${fileName}"`}
-        <div className={style.createActionButtons}>
+        <Panel.InlineElements>
           <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
             Cancel
           </Button>
@@ -88,7 +88,7 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
           >
             Merge
           </Button>
-        </div>
+        </Panel.InlineElements>
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
       <Panel.Section className={cx([style.innerColumn, style.inlineLabels])}>

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -6,39 +6,18 @@
   color: $blue-500;
 }
 
-.actionButton {
-  flex: 1;
-  text-align: right;
-}
-
 .form {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  gap: 1rem;
 }
 
 .formInput {
   flex: 2;
 }
 
-.headerButtons,
-.actionButtons,
-.createActionButtons {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.actionButtons {
-  margin-left: 1rem;
-}
-
-.createActionButtons {
-  margin-left: 1rem;
-  justify-content: flex-end;
-}
-
 .saveButton {
   text-transform: capitalize;
 }
@@ -62,12 +41,6 @@
   }
 }
 
-.flex {
-  display: flex;
-  gap: 1rem;
-  height: 100px;
-}
-
 .uploadLogoCard {
   display: flex;
   gap: 1rem;