feat: replace IonIcons with svg icons (#1069)

standardnotes · Jun 7, 2022 · 4c65784 · 4c65784
1 parent 218e7a3
commit 4c65784
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 68 deletions.
diff --git a/app/assets/fonts/ionicons.eot b/app/assets/fonts/ionicons.eot
diff --git a/app/assets/fonts/ionicons.ttf b/app/assets/fonts/ionicons.ttf
diff --git a/app/assets/fonts/ionicons.woff b/app/assets/fonts/ionicons.woff
diff --git a/app/assets/javascripts/Components/ContentListView/ContentListView.tsx b/app/assets/javascripts/Components/ContentListView/ContentListView.tsx
@@ -21,6 +21,7 @@ import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import ContentListOptionsMenu from './ContentListOptionsMenu'
+import Icon from '@/Components/Icon/Icon'
 
 type Props = {
   application: WebApplication
@@ -174,14 +175,12 @@ const ContentListView: FunctionComponent<Props> = ({ application, viewController
             <div className="section-title-bar-header">
               <div className="sk-h2 font-semibold title">{panelTitle}</div>
               <button
-                className="sk-button contrast wide"
+                className="flex items-center px-5 py-1 bg-contrast hover:brightness-130 color-text border-0 cursor-pointer"
                 title={addButtonLabel}
                 aria-label={addButtonLabel}
                 onClick={addNewItem}
               >
-                <div className="sk-label">
-                  <i className="ion-plus add-button" aria-hidden></i>
-                </div>
+                <Icon type="add" className="w-3.5 h-3.5" />
               </button>
             </div>
             <div className="filter-section" role="search">

diff --git a/app/assets/javascripts/Components/Footer/Footer.tsx b/app/assets/javascripts/Components/Footer/Footer.tsx
@@ -440,11 +440,9 @@ class Footer extends PureComponent<Props, State> {
                   id="lock-item"
                   onClick={this.lockClickHandler}
                   title="Locks application and wipes unencrypted data from memory."
-                  className="sk-app-bar-item"
+                  className="sk-app-bar-item pl-1 hover:color-info"
                 >
-                  <div className="sk-label">
-                    <i id="footer-lock-icon" className="icon ion-locked" />
-                  </div>
+                  <Icon type="lock-filled" />
                 </div>
               </Fragment>
             )}

diff --git a/app/assets/stylesheets/_ionicons.scss b/app/assets/stylesheets/_ionicons.scss
diff --git a/app/assets/stylesheets/index.css.scss b/app/assets/stylesheets/index.css.scss
@@ -9,7 +9,6 @@
 @import 'menus';
 @import 'modals';
 @import 'stylekit-sub';
-@import 'ionicons';
 @import 'reach-sub';
 @import 'sessions-modal';
 @import 'preferences';

diff --git a/app/assets/stylesheets/utils/_height.scss b/app/assets/stylesheets/utils/_height.scss
@@ -2,6 +2,10 @@
   height: 0.75rem;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-26 {
   width: 6.5rem;
 }

diff --git a/app/assets/stylesheets/utils/_padding.scss b/app/assets/stylesheets/utils/_padding.scss
@@ -112,8 +112,13 @@
 
 .px-4\.5,
 .sk-panel .px-4\.5 {
-  padding-left: 1.375rem;
-  padding-right: 1.375rem;
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 
 .px-9 {

diff --git a/app/assets/stylesheets/utils/_width.scss b/app/assets/stylesheets/utils/_width.scss
@@ -2,6 +2,10 @@
   width: 0.75rem;
 }
 
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }