address code review

Signed-off-by: Remington Breeze <remington@breeze.software>

ui/src/app/applications/components/applications-list/applications-filter.tsx

@@ -233,7 +233,7 @@ const FavoriteFilter = (props: AppFilterProps) => {
     return (
         <div
             className={`filter filter__item ${props.pref.showFavorites ? 'filter__item--selected' : ''}`}
-            style={{margin: '0.5em 0'}}
+            style={{margin: '0.5em 0', marginTop: '0.5em'}}
             onClick={() => onChange(!props.pref.showFavorites)}>
             <Checkbox
                 value={!!props.pref.showFavorites}
@@ -242,7 +242,7 @@ const FavoriteFilter = (props: AppFilterProps) => {
                     marginRight: '8px'
                 }}
             />
-            <div style={{marginRight: '5px'}}>
+            <div style={{marginRight: '5px', textAlign: 'center', width: '25px'}}>
                 <i style={{color: '#FFCE25'}} className='fas fa-star' />
             </div>
             <div className='filter__item__label'>Favorites Only</div>

ui/src/app/applications/components/filter/filter.scss

@@ -9,6 +9,8 @@ $slate: #191826;
     border-radius: 5px;
     margin-bottom: 1em;
     width: 100%;
+    color: #818d94;
+    font-weight: 500;
 
     &__header {
         font-size: 13px;
@@ -23,6 +25,12 @@ $slate: #191826;
         .argo-button {
             margin-left: auto;
             background: $slate;
+            font-size: 10px;
+            font-weight: bold;
+
+            i {
+                margin-right: 2px;
+            }
 
             &:hover {
                 background: $sidebar-color !important;
@@ -63,12 +71,15 @@ $slate: #191826;
         border-radius: 5px;
         display: flex;
         align-items: center;
-        background-color: $sidebar-color;
-        transition: background-color 200ms ease;
-        margin: 0.25em 0;
+        margin: 0.15em 0;
         cursor: pointer;
         flex-wrap: nowrap;
 
+        i.fa {
+            width: 25px;
+            text-align: center;
+        }
+
         &__label {
             text-overflow: ellipsis;
             flex-grow: 0;
@@ -87,7 +98,7 @@ $slate: #191826;
 .filters-group {
     display: flex;
     flex-wrap: wrap;
-    margin-top: 1em;
+    margin-top: 2em;
     &__toggle {
         display: none;
         cursor: pointer;
@@ -111,11 +122,18 @@ $slate: #191826;
         display: flex;
         align-items: center;
         height: 1.5em;
-        margin-bottom: 0.5em;
+        margin-bottom: 0em;
+        margin-top: -1.5em;
 
         .argo-button {
             margin-left: auto;
             background: $slate;
+            font-size: 10px;
+            font-weight: bold;
+
+            i {
+                margin-right: 2px;
+            }
 
             &:hover {
                 background: $sidebar-color !important;

ui/src/app/applications/components/filter/filter.tsx

@@ -56,14 +56,13 @@ export const FiltersGroup = (props: {children?: React.ReactNode; content: React.
     return (
         !props.collapsed && (
             <div className='filters-group'>
-                <div className='filters-group__header'>
-                    FILTERS{' '}
-                    {props.appliedFilter?.length > 0 && props.onClearFilter && (
+                {props.appliedFilter?.length > 0 && props.onClearFilter && (
+                    <div className='filters-group__header'>
                         <button onClick={() => props.onClearFilter()} className='argo-button argo-button--base argo-button--sm'>
-                            CLEAR ALL
+                            <i className='fa fa-times-circle' /> CLEAR ALL
                         </button>
-                    )}
-                </div>
+                    </div>
+                )}
                 <>{props.children}</>
                 <div className='filters-group__content'>{props.content}</div>
             </div>

ui/src/app/sidebar/sidebar.scss

@@ -1,31 +1,50 @@
 @import 'node_modules/argo-ui/v2/styles/colors.scss';
 @import '../shared/config.scss';
 
+$deselected-text: #818d94;
+
 .sidebar {
     min-width: $sidebar-width;
     width: $sidebar-width;
-    padding: 15px;
+    padding: 0 20px;
     top: 0;
     left: 0;
     position: fixed;
     height: 100vh;
     max-height: 100vh;
     color: white;
-    background-color: $silver-lining;
+    background-color: #0f2733;
     overflow: auto;
     z-index: 0;
 
+    &__container {
+        padding: 0 5px;
+    }
+
+    &__logo-container {
+        margin-top: 10px;
+        font-size: 12px;
+        color: $deselected-text;
+        margin-left: 12px;
+    }
+
     &__logo {
-        justify-content: center;
+        width: 100%;
         display: flex;
+        flex-direction: row-reverse;
         align-items: center;
         font-size: 24px;
         font-weight: 500;
-        margin-bottom: 0.5em;
+        margin: 1em 0;
+        margin-left: 7px;
 
-        img {
-            width: 40px;
-            margin-right: 7px;
+        &__character {
+            width: 42px;
+        }
+
+        &__text-logo {
+            height: 2em;
+            filter: invert(100%);
         }
     }
 
@@ -33,42 +52,48 @@
         cursor: pointer;
         width: 100%;
         text-align: center;
-        margin-bottom: 1em;
     }
 
     &__nav-item {
         cursor: pointer;
         display: flex;
         align-items: center;
-        font-size: 17px;
+        font-size: 16px;
+        font-weight: 500;
         $height: 2.5em;
         height: $height;
         line-height: $height;
-        color: $dull-shine;
+        color: $deselected-text;
 
         i {
             font-size: 26px;
             color: white;
-            width: 35px;
+            width: 40px;
+            padding-right: 45px;
         }
 
         i.fa {
             font-size: 22px;
-            margin-left: 3px;
+            margin-left: 2px;
+            margin-right: -2px;
             margin-top: 12px;
         }
 
         &--active {
             color: white;
-            font-weight: 500;
-            box-shadow: -3px 0 0px 0 inset $sky;
+            i {
+                color: #fe733f;
+            }
         }
     }
 
     &__collapse-button {
         text-align: center;
         cursor: pointer;
-        margin-top: 1em;
+        margin-left: 15px;
+        margin-bottom: 1em;
+        font-size: 20px;
+        color: $deselected-text;
     }
 
     &--collapsed {
@@ -77,17 +102,39 @@
         padding: 15px 5px;
         overflow: hidden !important;
 
+        .sidebar__logo {
+            margin-left: 0;
+            flex-direction: column;
+            margin-bottom: 18px;
+            margin-top: -7px;
+            justify-content: center;
+        }
+
+        .sidebar__collapse-button {
+            margin-left: 0;
+            margin-top: 1em;
+        }
+
         .sidebar__logo img {
             margin-right: 0;
         }
 
         .sidebar__nav-item i {
             margin-right: 0;
-            margin-left: 10px;
+            margin-left: 7px;
         }
 
         .sidebar__nav-item i.fa {
-            margin-left: 13px;
+            margin-left: 9px;
+        }
+
+        .sidebar__filter-button {
+            i {
+                font-size: 14px;
+                margin-top: 2em;
+                margin-left: 13px;
+                color: $deselected-text;
+            }
         }
     }
 }

ui/src/app/sidebar/sidebar.tsx

@@ -46,39 +46,50 @@ export const Sidebar = (props: SidebarProps) => {
 
     return (
         <div className={`sidebar ${props.pref.hideSidebar ? 'sidebar--collapsed' : ''}`}>
-            <div className='sidebar__logo'>
-                <img src='assets/images/logo.png' alt='Argo' /> {!props.pref.hideSidebar && 'Argo CD'}
-            </div>
-            <div className='sidebar__version' onClick={props.onVersionClick}>
-                {loading ? 'Loading...' : error?.state ? 'Unknown' : version?.Version || 'Unknown'}
-            </div>
-            {(props.navItems || []).map(item => (
-                <Tooltip key={item.path} content={item?.tooltip || item.title} {...tooltipProps}>
-                    <div
-                        key={item.title}
-                        className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}
-                        onClick={() => context.history.push(item.path)}>
-                        <React.Fragment>
-                            <div>
-                                <i className={item?.iconClassName || ''} />
-                                {!props.pref.hideSidebar && item.title}
-                            </div>
-                        </React.Fragment>
+            <div className='sidebar__container'>
+                <div className='sidebar__logo'>
+                    <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
+                        <i className={`fas fa-arrow-${props.pref.hideSidebar ? 'right' : 'left'}`} />
                     </div>
-                </Tooltip>
-            ))}
-            <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
-                <i className={`fas fa-arrow-${props.pref.hideSidebar ? 'right' : 'left'}`} />
-            </div>
-            {props.pref.hideSidebar && (
-                <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
-                    <Tooltip content='Show Filters' {...tooltipProps}>
-                        <div className='sidebar__nav-item'>
-                            <i className={`fas fa-filter`} style={{fontSize: '14px', margin: '0 auto'}} />
+                    {!props.pref.hideSidebar && (
+                        <div className='sidebar__logo-container'>
+                            <img src='assets/images/argologo.svg' alt='Argo' className='sidebar__logo__text-logo' />
+                            <div className='sidebar__version' onClick={props.onVersionClick}>
+                                {loading ? 'Loading...' : error?.state ? 'Unknown' : version?.Version || 'Unknown'}
+                            </div>
+                        </div>
+                    )}
+                    <img src='assets/images/logo.png' alt='Argo' className='sidebar__logo__character' />{' '}
+                </div>
+
+                {(props.navItems || []).map(item => (
+                    <Tooltip key={item.path} content={item?.tooltip || item.title} {...tooltipProps}>
+                        <div
+                            key={item.title}
+                            className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}
+                            onClick={() => context.history.push(item.path)}>
+                            <React.Fragment>
+                                <div>
+                                    <i className={item?.iconClassName || ''} />
+                                    {!props.pref.hideSidebar && item.title}
+                                </div>
+                            </React.Fragment>
                         </div>
                     </Tooltip>
-                </div>
-            )}
+                ))}
+
+                {props.pref.hideSidebar && (
+                    <Tooltip content='Show Filters' {...tooltipProps}>
+                        <div
+                            onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})}
+                            className='sidebar__nav-item sidebar__filter-button'>
+                            <div>
+                                <i className={`fas fa-filter`} />
+                            </div>
+                        </div>
+                    </Tooltip>
+                )}
+            </div>
             <div id={SIDEBAR_TOOLS_ID} />
         </div>
     );

ui/src/app/ui-banner/ui-banner.scss

@@ -3,7 +3,8 @@
 .ui-banner {
     background: $argo-color-gray-5;
     position: fixed;
-    width: -webkit-fill-available;
+    left: 0;
+    right: 0;
     z-index: 10;
     text-align: center;
     color: $argo-color-teal-8;