aesirxio#214: improve UI

trangiahuy031099 · Feb 18, 2023 · 678e69c · 678e69c
1 parent dba688a
commit 678e69c
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 16 deletions.
diff --git a/src/components/ChooseAnAction/index.jsx b/src/components/ChooseAnAction/index.jsx
@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 import { Dropdown } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useDamViewModel } from 'store/DamStore/DamViewModelContextProvider';
-
+import styles from './index.module.scss';
 // eslint-disable-next-line react/display-name
 const CustomToggle = React.forwardRef(({ onClick }, ref) => {
   const { t } = useTranslation('common');
@@ -17,9 +17,9 @@ const CustomToggle = React.forwardRef(({ onClick }, ref) => {
         e.preventDefault();
         onClick(e);
       }}
-      className="d-flex align-items-center text-decoration-none cursor-pointer choose-an-action justify-content-between w-100"
+      className="d-flex align-items-center text-decoration-none cursor-pointer choose-an-action justify-content-between w-100 h-100 mt-n1"
     >
-      <div className="text-body pe-3 pe-none">
+      <div className="pe-3 pe-none">
         <p className="mb-0 text-blue-0 fw-semibold fs-14">{t('choose_an_action')}</p>
       </div>
       <i className="icons text-green pe-none">
@@ -95,15 +95,15 @@ const ChooseAction = observer(() => {
           as={CustomToggle}
           id="dropdown-custom-components position-relative pe-none"
         ></Dropdown.Toggle>
-        <Dropdown.Menu className="shadow border-0">
+        <Dropdown.Menu className="shadow border-0 w-100 border-top">
           <div className="">
             <ul className="list-unstyled ps-0 mb-0 list_menu_avatar">
               {Action.options.map((value, index) => {
                 return (
                   <li key={index}>
                     <Dropdown.Item
                       as={'p'}
-                      className="cursor-pointer text-body d-block rounded-1 text-decoration-none mb-0"
+                      className={`cursor-pointer text-blue-0 d-block rounded-1 text-decoration-none mb-0 ${styles.dropdown_item}`}
                       onClick={value?.onSelect}
                     >
                       {t(value.label)}

diff --git a/src/components/ChooseAnAction/index.module.scss b/src/components/ChooseAnAction/index.module.scss
@@ -0,0 +1,8 @@
+@import '../../scss/utils/bootstrap.scss';
+
+.dropdown_item {
+  &:hover {
+    background-color: transparent;
+    color: $green !important;
+  }
+}
diff --git a/src/components/Select/customStyles.js b/src/components/Select/customStyles.js
@@ -17,7 +17,7 @@ const customStyles = (isBorder, isShadow = true) => {
 
         backgroundColor: 'var(--bs-white)',
         cursor: 'pointer',
-        borderRadius: 0,
+        borderRadius: 5,
         width: 'auto',
       };
     },
@@ -46,6 +46,7 @@ const customStyles = (isBorder, isShadow = true) => {
           color: 'var(--dropdown-item-hover-color)',
           backgroundColor: 'var(--dropdown-item-hover-bg)',
         },
+        fontWeight: state.isSelected ? 600 : 400,
       };
     },
     indicatorSeparator: () => ({ display: 'none' }),

diff --git a/src/components/Table/Thumb.jsx b/src/components/Table/Thumb.jsx
@@ -33,7 +33,7 @@ const FakeThumb = observer(({ id, index, isList }) => {
       className={`position-absolute top-0 start-0 w-100 h-100 pe-none user-select-none ${
         isSelect ? 'border border-success bg-gray-dark' : ''
       } ${checkBorderBottom ? 'border-bottom-0' : ''} ${checkBorderTop ? 'border-top-0' : ''} ${
-        isList && isSelect ? 'bg-success-10' : ''
+        isList && isSelect ? 'bg-success-05' : ''
       }`}
     ></span>
   );

diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx
@@ -295,7 +295,7 @@ const Table = ({
                           </div>
                           {listViewModel?.damLinkFolder.split('/').length > 1 && (
                             <div
-                              className={`col_thumb ${styles.col_thumb} col-${
+                              className={`col_thumb ${styles.col_thumb_folder} col-${
                                 !thumbColumnsNumber ? '3' : thumbColumnsNumber
                               } mb-4 zindex-2`}
                             >
@@ -319,7 +319,7 @@ const Table = ({
                             </div>
                             {index === 0 && listViewModel?.damLinkFolder.split('/').length > 1 && (
                               <div
-                                className={`col_thumb ${styles.col_thumb} col-${
+                                className={`col_thumb ${styles.col_thumb_folder} col-${
                                   !thumbColumnsNumber ? '3' : thumbColumnsNumber
                                 } mb-4 zindex-2`}
                               >
@@ -337,9 +337,11 @@ const Table = ({
                         )}
                       <Thumb
                         {...row.getRowProps()}
-                        className={`col_thumb ${styles.col_thumb} col-${
-                          !thumbColumnsNumber ? '3' : thumbColumnsNumber
-                        } mb-4 zindex-2`}
+                        className={`col_thumb  ${
+                          !isList && !row.original[DAM_ASSETS_FIELD_KEY.TYPE]
+                            ? styles.col_thumb_folder
+                            : styles.col_thumb
+                        }  col-${!thumbColumnsNumber ? '3' : thumbColumnsNumber} mb-4 zindex-2`}
                         newRowCells={newRowCells}
                         index={index}
                         row={row}

diff --git a/src/components/Table/index.module.scss b/src/components/Table/index.module.scss
@@ -21,7 +21,9 @@
     display: none !important;
   }
 }
-
+.col_thumb_folder {
+  height: 220px;
+}
 .col_thumb {
   height: 248px;
 }

diff --git a/src/scss/utils/utilities.scss b/src/scss/utils/utilities.scss
@@ -63,7 +63,7 @@ $utilities: map-merge(
             'red-2': rgba($red, 0.15),
             'transparent': transparent,
             'sidebar': #0c1215,
-            'success-10': rgba($success, 0.1),
+            'success-05': rgba($success, 0.05),
           )
         ),
     ),

diff --git a/src/scss/utils/variables.scss b/src/scss/utils/variables.scss
@@ -274,7 +274,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 // for react-select
 :root {
   --dropdown-item-hover-color: #1ab394;
-  --dropdown-item-hover-bg: #e8e9ec;
+  // --dropdown-item-hover-bg: #e8e9ec;
   --view-active-bg: #e8e9ec;
   --text-title-color: $color-blue;
   --dropdown-bg: #fff;

diff --git a/src/store/DamStore/DamListViewModel.js b/src/store/DamStore/DamListViewModel.js
@@ -21,7 +21,7 @@ class DamListViewModel {
     'filter[search]': '',
   };
 
-  isList = true;
+  isList = false;
   damIdsSelected = null;
   isSearch = false;
   subscription = null;