Improve Expand Icon Size (#107)

stanleyowen · Sep 26, 2021 · 6c0b787 · 6c0b787
1 parent 30edcf2
commit 6c0b787
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -242,6 +242,9 @@ svg {
 	text-decoration: none;
 }
 #version a:hover { text-decoration: underline }
+#version svg { font-size: 1.2em !important }
+#version .MuiPaper-root:before{ display: none !important }
+
 .small { font-size: 12px; font-weight: normal !important; }
 button {
 	border: none;
@@ -261,7 +264,6 @@ button {
 	width: 75px;
     height: 75px;
 }
-#version .MuiPaper-root:before{ display: none !important; }
 
 /* PlayBack Button */
 .play-btn {

diff --git a/src/components/about.component.tsx b/src/components/about.component.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Accordion, AccordionSummary } from '@mui/material'
 
 import { version } from '../../package.json'
-import { Themes, License, AboutOutline, PrivacyPolicy, ExpandMoreIcon } from '../lib/icons.component'
+import { Themes, License, AboutOutline, PrivacyPolicy, Expand } from '../lib/icons.component'
 
 const About = ({ properties }: any) => {
     const setTheme = (url: string | Boolean) => {
@@ -31,7 +31,7 @@ const About = ({ properties }: any) => {
             </div>
 
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <Themes />
                         <p className="ml-10">Themes</p>
@@ -45,7 +45,7 @@ const About = ({ properties }: any) => {
             </Accordion>
 
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <PrivacyPolicy />
                         <p className="ml-10">Privacy Policy</p>
@@ -60,7 +60,7 @@ const About = ({ properties }: any) => {
             </Accordion>
 
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <License />
                         <p className="ml-10">License</p>

diff --git a/src/lib/icons.component.tsx b/src/lib/icons.component.tsx
@@ -49,7 +49,7 @@ export function Themes() {
 export function PrivacyPolicy() {
     return <svg width="1.5em" height="1.5em" viewBox="0 0 48 48"><path d="M6 8.256L24.009 3L42 8.256v10.778A26.316 26.316 0 0 1 24.003 44h0A26.32 26.32 0 0 1 6 19.029V8.256z" stroke="currentColor" strokeWidth="4" strokeLinejoin="round" fill="none" fillRule="evenodd"></path></svg>
 }
-export function ExpandMoreIcon() {
+export function Expand() {
     return <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M12 8l-6 6l1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" fill="currentColor"></path></svg>
 }
 export function License() {