(clean) up styling and improve responsiveness

karrioapi · Dec 20, 2023 · 35499b2 · 35499b2
1 parent 0528419
commit 35499b2
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 19 deletions.
diff --git a/apps/dashboard/src/modules/Settings/account.tsx b/apps/dashboard/src/modules/Settings/account.tsx
@@ -57,15 +57,17 @@ export default function AccountPage(pageProps: any) {
 
         <div>
           <div className="columns py-6 my-4">
-            <div className="column is-5 pr-6">
+            <div className="column is-5 pr-2">
               <p className="subtitle is-6 py-1">Profile</p>
-              <p className="is-size-7 pr-6">Your email address is your identity on {APP_NAME} and is used to log in.</p>
+              <p className="is-size-7 pr-2">Your email address is your identity on {APP_NAME} and is used to log in.</p>
             </div>
 
-            <div className="column is-7">
+            <div className="column is-4">
               <EmailManagement />
               <ProfileUpdateInput label="Name (Optional)" propertyKey="full_name" inputType="text" />
             </div>
+
+            <div className="column is-3"></div>
           </div>
 
           <hr style={{ height: '1px' }} />
@@ -77,6 +79,8 @@ export default function AccountPage(pageProps: any) {
             </div>
 
             <PasswordManagement />
+
+            <div className="column is-3"></div>
           </div>
 
           <hr style={{ height: '1px' }} />

diff --git a/apps/dashboard/src/modules/Settings/addresses.tsx b/apps/dashboard/src/modules/Settings/addresses.tsx
@@ -114,7 +114,7 @@ export default function AddressPage(pageProps: any) {
                 {(address_templates?.edges || []).map(({ node: template }) => (
 
                   <tr key={`${template.id}-${Date.now()}`}>
-                    <td className="template is-vcentered is-size-6 has-text-weight-bold text-ellipsis">
+                    <td className="template is-vcentered is-size-7 has-text-weight-bold text-ellipsis">
                       <span className="text-ellipsis" title={template.label}>{template.label}</span>
                     </td>
                     <td className="address is-vcentered is-size-7 has-text-weight-bold has-text-grey text-ellipsis">

diff --git a/apps/dashboard/src/modules/Settings/parcels.tsx b/apps/dashboard/src/modules/Settings/parcels.tsx
@@ -114,10 +114,10 @@ export default function ParcelsPage(pageProps: any) {
               {(parcel_templates?.edges || []).map(({ node: template }) => (
 
                 <tr key={`${template.id}-${Date.now()}`}>
-                  <td className="template is-vcentered is-size-6 has-text-weight-bold text-ellipsis">
+                  <td className="template is-vcentered is-size-7 has-text-weight-bold text-ellipsis">
                     <span className="text-ellipsis" title={template.label}>{template.label}</span>
                   </td>
-                  <td className="parcel is-vcentered">
+                  <td className="parcel is-vcentered text-ellipsis">
                     <ParcelDescription parcel={template.parcel as any} />
                   </td>
                   <td className="default is-vcentered has-text-right">

diff --git a/apps/dashboard/src/styles/dashboard.scss b/apps/dashboard/src/styles/dashboard.scss
@@ -133,7 +133,8 @@ Karrio custom styling
   }
 
   .action {
-    width: 15%;
+    width: 150px;
+    min-width: 150px;
   }
 }
 
@@ -154,10 +155,12 @@ Karrio custom styling
 
   .default {
     width: 100px;
+    min-width: 100px;
   }
 
   .action {
     width: 90px;
+    min-width: 90px;
   }
 }
 
@@ -168,16 +171,17 @@ Karrio custom styling
   }
 
   .parcel {
-    min-width: 10vw;
+    min-width: 250px;
   }
 
   .default {
-    width: 10%;
     width: 100px;
+    min-width: 100px;
   }
 
   .action {
     width: 90px;
+    min-width: 90px;
   }
 }
 
@@ -356,15 +360,17 @@ Karrio custom styling
 .members-table {
   .member {
     width: 40%;
+    min-width: 150px;
   }
 
   .role {
     width: 25%;
+    min-width: 150px;
   }
 
   .last-login {
-    width: 25%;
-    min-width: 150px;
+    width: 180px;
+    min-width: 180px;
   }
 
   .action {

diff --git a/packages/ui/forms/organization-management.tsx b/packages/ui/forms/organization-management.tsx
@@ -36,11 +36,13 @@ export const OrganizationManagement: React.FC<OrganizationManagementComponent> =
           <p className="subtitle is-6 py-1">Organization Name</p>
         </div>
 
-        <div className="column is-7">
+        <div className="column is-5">
 
           <OrganizationUpdateInput propertyKey="name" inputType="text" />
 
         </div>
+
+        <div className="column is-2"></div>
       </div>
 
       <header className="px-0 pt-4">
@@ -83,6 +85,7 @@ export const OrganizationManagement: React.FC<OrganizationManagementComponent> =
                     {member.is_admin && <span className="is-size-7">Admin</span>}
                     {member.is_admin && member.is_owner && ', '}
                     {member.is_owner && <span className="is-size-7">Owner</span>}
+                    {!member.is_admin && !member.is_owner && <span className="is-size-7">View Only</span>}
                   </p>
                 </td>
                 <td className="last-login is-vcentered">

diff --git a/packages/ui/forms/organization-update-input.tsx b/packages/ui/forms/organization-update-input.tsx
@@ -53,7 +53,6 @@ export const OrganizationUpdateInput: React.FC<OrganizationUpdateInputComponent>
           onChange={handleOnChange}
           defaultValue={((organization || {}) as any)[propertyKey] || ""}
           type={inputType}
-          style={{ maxWidth: "60%" }}
           disabled={!organization?.current_user?.is_admin}
           required
         />

diff --git a/packages/ui/forms/password-management.tsx b/packages/ui/forms/password-management.tsx
@@ -69,28 +69,28 @@ export const PasswordManagement: React.FC<{}> = () => {
   }
 
   return (
-    <form method="post" onSubmit={onSubmit} className="column is-7">
+    <form method="post" onSubmit={onSubmit} className="column">
 
       <InputField
         label="Current Password" name="old_password" type="password"
         placeholder="Current Password" className="is-small" fieldClass="mt-3"
-        onChange={handleChange} value={data.old_password} style={{ maxWidth: "60%" }} required>
+        onChange={handleChange} value={data.old_password} required>
         {renderFieldError("old_password", error)}
       </InputField>
 
-      <hr style={{ height: "1px", maxWidth: "60%" }} />
+      <hr style={{ height: "1px" }} />
 
       <InputField
         label="New Password" name="new_password1" type="password"
         placeholder="New Password" className="is-small" fieldClass="mt-3"
-        onChange={handleChange} value={data.new_password1} style={{ maxWidth: "60%" }} required>
+        onChange={handleChange} value={data.new_password1} required>
         {renderFieldError("new_password1", error)}
       </InputField>
 
       <InputField
         label="Confirm New Password" name="new_password2" type="password"
         placeholder="Confirm Password" className="is-small" fieldClass="mt-3"
-        onChange={handleChange} value={data.new_password2} style={{ maxWidth: "60%" }} required>
+        onChange={handleChange} value={data.new_password2} required>
         {renderFieldError("new_password2", error)}
       </InputField>
 

diff --git a/packages/ui/forms/profile-update-input.tsx b/packages/ui/forms/profile-update-input.tsx
@@ -50,7 +50,8 @@ export const ProfileUpdateInput: React.FC<ProfileUpdateInputComponent> = ({ labe
           onChange={handleOnChange}
           defaultValue={((user || {}) as any)[propertyKey] || ""}
           type={inputType}
-          style={{ maxWidth: "60%" }} required />
+          required
+        />
 
         <input className="button is-success is-small mr-1" type="submit" value="Save"
           style={{ visibility: (hasChanged ? "visible" : "hidden") }} />