(feat) Apply some design changes (#178)

openmrs · Aug 18, 2023 · 2f912ff · 2f912ff
1 parent f3da811
commit 2f912ff
Show file tree

Hide file tree

Showing 15 changed files with 325 additions and 283 deletions.
diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx
@@ -61,6 +61,7 @@ type Mutator = KeyedMutator<{
 type ActionButtonsProps = {
   form: FormType;
   mutate: Mutator;
+  responsiveSize: string;
   t: TFunction;
 };
 
@@ -89,7 +90,12 @@ function CustomTag({ condition }: { condition: boolean }) {
   );
 }
 
-function ActionButtons({ form, mutate, t }: ActionButtonsProps) {
+function ActionButtons({
+  form,
+  mutate,
+  responsiveSize,
+  t,
+}: ActionButtonsProps) {
   const { clobdata } = useClobdata(form);
   const formResources = form?.resources;
   const [showDeleteFormModal, setShowDeleteFormModal] = useState(false);
@@ -144,6 +150,7 @@ function ActionButtons({ form, mutate, t }: ActionButtonsProps) {
         kind={"ghost"}
         iconDescription={t("import", "Import")}
         hasIconOnly
+        size={responsiveSize}
       />
     );
   };
@@ -161,6 +168,7 @@ function ActionButtons({ form, mutate, t }: ActionButtonsProps) {
         kind={"ghost"}
         iconDescription={t("editSchema", "Edit schema")}
         hasIconOnly
+        size={responsiveSize}
         tooltipAlignment="start"
       />
     );
@@ -179,6 +187,7 @@ function ActionButtons({ form, mutate, t }: ActionButtonsProps) {
           kind={"ghost"}
           iconDescription={t("downloadSchema", "Download schema")}
           hasIconOnly
+          size={responsiveSize}
           tooltipAlignment="start"
         />
       </a>
@@ -194,6 +203,7 @@ function ActionButtons({ form, mutate, t }: ActionButtonsProps) {
         kind={"ghost"}
         iconDescription={t("deleteSchema", "Delete schema")}
         hasIconOnly
+        size={responsiveSize}
         tooltipAlignment="start"
       />
     );
@@ -266,6 +276,7 @@ function ActionButtons({ form, mutate, t }: ActionButtonsProps) {
 function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
   const config = useConfig();
   const isTablet = useLayoutType() === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
   const [filter, setFilter] = useState("");
   const [searchString, setSearchString] = useState("");
   const pageSize = 10;
@@ -329,7 +340,14 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
     id: form?.uuid,
     published: <CustomTag condition={form?.published} />,
     retired: <CustomTag condition={form?.retired} />,
-    actions: <ActionButtons form={form} mutate={mutate} t={t} />,
+    actions: (
+      <ActionButtons
+        form={form}
+        mutate={mutate}
+        responsiveSize={responsiveSize}
+        t={t}
+      />
+    ),
   }));
 
   const handlePublishStatusChange = ({
@@ -368,6 +386,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
             titleText={
               t("filterByPublishedStatus", "Filter by publish status") + ":"
             }
+            size={responsiveSize}
             type="inline"
             items={["All", "Published", "Unpublished"]}
             onChange={handlePublishStatusChange}
@@ -380,7 +399,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
       <DataTable
         rows={tableRows}
         headers={tableHeaders}
-        size={isTablet ? "sm" : "lg"}
+        size={isTablet ? "lg" : "sm"}
         useZebraStyles
       >
         {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
@@ -390,16 +409,21 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
               data-testid="forms-table"
             >
               <div className={styles.toolbarWrapper}>
-                <TableToolbar className={styles.tableToolbar}>
-                  <TableToolbarContent>
+                <TableToolbar
+                  className={styles.tableToolbar}
+                  size={responsiveSize}
+                >
+                  <TableToolbarContent className={styles.headerContainer}>
                     <TableToolbarSearch
+                      className={styles.searchbox}
                       onChange={handleSearch}
                       placeholder={t("searchThisList", "Search this list")}
                     />
                     <Button
                       kind="primary"
                       iconDescription={t("createNewForm", "Create a new form")}
                       renderIcon={(props) => <Add size={16} {...props} />}
+                      size={responsiveSize}
                       onClick={() =>
                         navigate({
                           to: `${window.spaBase}/form-builder/new`,

diff --git a/src/components/dashboard/dashboard.scss b/src/components/dashboard/dashboard.scss
@@ -1,10 +1,10 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/styles/scss/colors';
 
 .container {
   padding: 2rem;
-  background-color: $ui-01;
+  background-color: colors.$gray-10;
 }
 
 .backgroundDataFetchingIndicator {
@@ -19,18 +19,49 @@
 .toolbarWrapper {
   position: relative;
   display: flex;
-  height: spacing.$spacing-09;
   justify-content: flex-end;
 }
 
+:global(.omrs-breakpoint-lt-desktop) {
+  .toolbarWrapper {
+    height: spacing.$spacing-09;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) {
+  .toolbarWrapper {
+    height: spacing.$spacing-07;
+  }
+}
+
 .tableToolbar {
   width: 20%;
   min-width: 12.5rem;
 }
 
-.table tr:last-of-type {
+.headerContainer {
+  background-color: colors.$gray-10;
+}
+
+.searchbox {
+  input {
+    outline: 2px solid colors.$orange-40 !important;
+  }
+}
+
+
+.table {
+  tr {
+    &:last-of-type {
+      td {
+        border-bottom: none;
+      }
+    }
+  }
+
   td {
-    border-bottom: none;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
@@ -42,7 +73,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  min-height: 3rem;
+  min-height: 2rem;
   margin-bottom: 0.5rem;
 }
 
@@ -57,15 +88,15 @@
   padding: 0;
 
   :global(.cds--data-table-content) {
-    border: 1px solid $ui-03;
+    border: 1px solid colors.$gray-20;
     border-bottom: none;
     overflow: visible;
   }
 
   :global(.cds--table-toolbar) {
     position: relative;
     height: 2rem;
-    min-height: 0rem;
+    min-height: 0rem;  
     overflow: visible;
     top: 0;
   }
@@ -89,13 +120,13 @@
 
 .content {
   @include type.type-style('heading-compact-02');
-  color: $text-02;
+  color: colors.$gray-70;
   margin-bottom: 0.5rem;
 }
 
 .tileContainer {
-  background-color: $ui-02;
-  border-top: 1px solid $ui-03;
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-70;
   padding: 5rem 0;
 }
 

diff --git a/src/components/empty-state/empty-state.scss b/src/components/empty-state/empty-state.scss
@@ -1,29 +1,29 @@
+@use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
 
 .action {
   margin-bottom: spacing.$spacing-03;
 }
 
 .content {
   @include type.type-style("heading-compact-01");
-  color: $text-02;
+  color: colors.$gray-70;
   margin-top: spacing.$spacing-05;
   margin-bottom: spacing.$spacing-03;
 }
 
 .desktopHeading {
   h4 {
     @include type.type-style('heading-compact-02');
-    color: $text-02;
+    color: colors.$gray-70;
   }
 }
 
 .tabletHeading {
   h4 {
     @include type.type-style('heading-03');
-    color: $text-02;
+    color: colors.$gray-70;
   }
 }
 
@@ -51,5 +51,5 @@
 
 .tile {
   text-align: center;
-  border: 1px solid $ui-03;
+  border: 1px solid colors.$gray-70;
 }
diff --git a/src/components/error-state/error-state.scss b/src/components/error-state/error-state.scss
@@ -1,6 +1,6 @@
+@use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
 
 .errorMessage {
   @include type.type-style("heading-compact-02");
@@ -12,20 +12,20 @@
 .errorCopy {
   margin-bottom: spacing.$spacing-03;
   @include type.type-style("body-01");
-  color: $text-02;
+  color: colors.$gray-70;
 }
 
 .desktopHeading {
   h4 {
     @include type.type-style('heading-compact-02');
-    color: $text-02;
+    color: colors.$gray-70;
   }
 }
 
 .tabletHeading {
   h4 {
     @include type.type-style('heading-03');
-    color: $text-02;
+    color: colors.$gray-70;
   }
 }
 
@@ -45,5 +45,5 @@
 
 .tile {
   text-align: center;
-  border: 1px solid $ui-03;
+  border: 1px solid colors.$gray-20;
 }