ui updates

Author: AhsanKhan7

src/ui/assets/cookie.svg

@@ -4,11 +4,16 @@ import { Image } from '..';
 
 import logo from '../../assets/logo.svg';
 import logoWhite from '../../assets/logo_white.svg';
+import logoSmallWhite from '../../assets/logo_small.svg';
 
 export const ZenMLLogo: React.FC = () => (
   <Image style={{ width: 113, height: 32 }} src={logo} />
 );
 
 export const ZenMLLogoWhite: React.FC = () => (
   <Image style={{ width: 150, height: 35 }} src={logoWhite} />
+);
+
+export const ZenMLLogoSmall: React.FC = () => (
+  <Image style={{ width: 36, height: 36 }} src={logoSmallWhite} />
 );

src/ui/assets/logo_small.svg

@@ -31,7 +31,7 @@
 
 .baseParagraph {
   font-family: $fontFamilyNormal;
-  color: $textColor;
+  color: #828282;
   word-wrap: break-word;
   margin: 0;
 }

src/ui/components/logos/index.tsx

@@ -36,18 +36,21 @@
 
 .tableHeaderRow {
   border-top: 1px solid $lightestGreyColor;
-  background-color: $lightestGreyColor ;
+  background-color: #D9D9D9 !important;
 }
 
 .tableHeadingTh {
   text-align: left;
   vertical-align: middle;
-
+  color: #424240 !important;
+  font-size: 14px !important;
+  font-weight: 400
 }
 
 
 .tableTd {
   vertical-align: middle;
+  height: 53px !important
 }
 
 .lastTable tbody tr:last-child {

src/ui/components/typographies/index.module.scss

@@ -47,6 +47,91 @@ export const Table: React.FC<TableProps> = ({
   renderAfterRow,
   trOnClick,
 }) => {
+
+  // const [tableHeight, setTableHeight] = useState("auto");
+  // const [activeIndex, setActiveIndex] = useState(null);
+  // const tableElement = useRef(null);
+  // const createHeaders = (headers: any) => {
+  //   return headerCols?.map((item: any) => ({
+  //     text: item,
+  //     ref: tableElement
+  //   }));
+  // };
+  
+  // const columns = createHeaders(headerCols?.length);
+
+  // const minCellWidth = 120
+
+  // useEffect(() => {
+  //   // @ts-ignore
+  //   // console.log(tableElement && tableElement.current.offsetHeight);
+  //   setTableHeight(tableElement?.current?.offsetHeight);
+  // }, []);
+
+  // const mouseDown = (index: any) => {
+  //   setActiveIndex(index);
+  // };
+
+
+  // const mouseMove = useCallback(
+  //   (e) => {
+  //     const gridColumns = columns.map((col: any, i: any) => {
+  //       if (i === activeIndex) {
+  //         const width = e.clientX - col.ref.current.offsetLeft;
+
+  //         if (width >= minCellWidth) {
+  //           return `${width}px`;
+  //         }
+  //       }
+  //       return `${col.ref.current.offsetWidth}px`;
+  //     });
+
+  //     // @ts-ignore
+  //     tableElement.current.style.gridTemplateColumns = `${gridColumns.join(
+  //       " "
+  //     )}`;
+  //   },
+  //   [activeIndex, columns, minCellWidth]
+  // );
+
+  // const removeListeners = useCallback(() => {
+  //   window.removeEventListener("mousemove", mouseMove);
+  //   window.removeEventListener("mouseup", removeListeners);
+  // }, [mouseMove]);
+
+  // const mouseUp = useCallback(() => {
+  //   setActiveIndex(null);
+  //   removeListeners();
+  // }, [setActiveIndex, removeListeners]);
+
+  // useEffect(() => {
+  //   if (activeIndex !== null) {
+  //     window.addEventListener("mousemove", mouseMove);
+  //     window.addEventListener("mouseup", mouseUp);
+  //   }
+
+  //   return () => {
+  //     removeListeners();
+  //   };
+  // }, [activeIndex, mouseMove, mouseUp, removeListeners]);
+
+  // // Demo only
+  // const resetTableCells = () => {
+  //   // @ts-ignore
+  //   tableElement.current.style.gridTemplateColumns = "";
+  // };
+
+
+
+
+
+
+
+
+
+
+
+
   const { pageIndex, setPageIndex } = usePaginationAsQueryParam();
 
   const { itemsForPage, pages, totalOfPages } = getPaginationData({
@@ -64,31 +149,28 @@ export const Table: React.FC<TableProps> = ({
   if (loading) {
     return <FullWidthSpinner color="black" size="md" />;
   }
-
-
+  
   return (
     <FlexBox.Column className={styles.tableWrapper} fullWidth>
       <IfElse
         condition={tableRows.length > 0 && !loading}
         renderWhenTrue={() => (
           <>
             <table className={styles.table}>
-              <thead style={{ backgroundColor: '#F4F4F4' }}>
+              <thead>
                 <tr className={showHeader ? styles.tableHeaderRow : ''}>
-                  {headerCols.map((headerCol: HeaderCol, index: number) => (
+                  {headerCols.map((headerCol: HeaderCol, index: number, i) => (
                     <th
-                      className={styles.tableHeadingTh}
+                      className={styles.tableHeadingTh}                
                       style={{
                         width: headerCol.width,
-                        color: '#000',
+                        color: '#424240',
+                        fontSize: '14px',
                         fontWeight: 700,
                       }}
                       key={index}
                     >
-                      <Box
-                        paddingVertical={showHeader ? 'sm' : null}
-                        paddingLeft="lg"
-                      >
+                      <Box style={{ backgroundColor: 'rgba(217, 217, 217, 0.2)' }} paddingVertical={showHeader ? 'sm' : null} paddingLeft="lg">
                         {headerCol.render && headerCol.render()}
                       </Box>
                     </th>
@@ -111,6 +193,7 @@ export const Table: React.FC<TableProps> = ({
                         styles.tableRow,
                         trOnClick && styles.clickableTableRow,
                       )}
+                      style={{ backgroundColor: index % 2 !== 0 ? '#F5F3F9' : 'white' }}
                       key={index}
                     >
                       {headerCols.map((headerCol: HeaderCol, index: number) => (
@@ -119,7 +202,7 @@ export const Table: React.FC<TableProps> = ({
                           style={{ width: headerCol.width }}
                           key={index}
                         >
-                          <Box paddingVertical="md" paddingLeft="lg">
+                          <Box paddingVertical="sm" paddingLeft="lg">
                             <Truncate maxLines={1}>
                               {headerCol.renderRow(headerRow)}
                             </Truncate>