make icons on mobile bigger

Blargian · Blargian · commit 55d2dfeae6d7 · 2025-06-11T11:23:16.000+02:00
diff --git a/src/components/ColorModeToggler/index.jsx b/src/components/ColorModeToggler/index.jsx
@@ -16,11 +16,11 @@ export default function ColorModeToggle({className = ''}) {
   return (
     <button className={`${styles.colorModeButton} ${className}`} onClick={updateColor}>
       {colorMode === 'dark' ? (
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6" strokeLinecap="round" strokeLinejoin="round">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="31" height="31" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6" strokeLinecap="round" strokeLinejoin="round">
           <path strokeLinecap="round" strokeLinejoin="round" d="M18.3945 13.0269C18.7245 12.8719 19.0765 13.1969 18.9845 13.5499C18.6705 14.7519 18.0535 15.8959 17.1035 16.8459C14.2825 19.6669 9.76953 19.7259 7.02153 16.9779C4.27353 14.2299 4.33353 9.71589 7.15453 6.89489C8.10453 5.94489 9.24753 5.32789 10.4505 5.01389C10.8035 4.92189 11.1275 5.27389 10.9735 5.60389C9.97153 7.74289 10.3005 10.3049 11.9975 12.0019C13.6935 13.6999 16.2555 14.0289 18.3945 13.0269V13.0269Z" />
         </svg>
       ) : (
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6" strokeLinecap="round" strokeLinejoin="round">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="31" height="31" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6" strokeLinecap="round" strokeLinejoin="round">
           <path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
           <circle cx="12" cy="12" r="5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
diff --git a/src/components/ColorModeToggler/styles.module.scss b/src/components/ColorModeToggler/styles.module.scss
@@ -5,13 +5,14 @@
   align-items: center;
   cursor: pointer;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 0.438rem;
+  padding: 1px;
   gap: 8px;
   color: var(--click-color-secondary-button-text);
   border: 0;
   border-radius: 4px;
   background: transparent;
 }
+
 .colorModeButton:hover {
   background: var(--ifm-menu-color-background-active);
 }
@@ -21,5 +22,19 @@
   white-space: nowrap;
 }
 
+@media (min-width: breakpoints.$laptop-breakpoint) {
+  [data-theme="light"] .colorModeButton {
+    color: rgb(100, 100, 100);
+  }
+
+  .colorModeButton {
+    width: 28px;
+    height: 28px;
+  }
+
+  .colorModeButton:hover {
+      background-color: unset;
+  }
+}
 
 
diff --git a/src/components/MobileSideBarMenu/Content.jsx b/src/components/MobileSideBarMenu/Content.jsx
@@ -252,7 +252,11 @@ const MobileSideBarMenuContents = ({ className, onClick, onClose, sidebar, path,
                     <div className={styles.headerActions}>
                         <MobileLanguagePicker onLanguageChange={handleLanguageChange} />
                         <ColorModeToggle/>
-                        <div className={styles.iconClose}><IconClose width={12} height={12} onClick={onClose || onClick} /></div>
+                        <div className={styles.iconClose} onClick={onClose || onClick}>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="31" height="31" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6" strokeLinecap="round" strokeLinejoin="round">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 6L18 18M6 18L18 6" />
+                            </svg>
+                        </div>
                     </div>
                 </div>
                 <div className={styles.bottomLevel}>
diff --git a/src/components/MobileSideBarMenu/MobileLanguagePicker.jsx b/src/components/MobileSideBarMenu/MobileLanguagePicker.jsx
@@ -114,14 +114,14 @@ const MobileLanguagePicker = ({ onLanguageChange }) => {
                 aria-expanded={isOpen}
                 aria-haspopup="true"
             >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className={styles.globeIcon}>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className={styles.globeIcon}>
                     <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
                 </svg>
                 <span className={styles.languageText}>{currentLocaleLabel}</span>
                 <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 24 24"
+                    width="31"
+                    height="31"
+                    viewBox="0 0 31 31"
                     fill="currentColor"
                     className={`${styles.chevronIcon} ${isOpen ? styles.chevronOpen : ''}`}
                 >
diff --git a/src/components/MobileSideBarMenu/mobileLanguagePicker.module.scss b/src/components/MobileSideBarMenu/mobileLanguagePicker.module.scss
@@ -3,13 +3,14 @@
   position: relative;
   display: flex;
   align-items: center;
+  height: 32px;
 }
 
 .languageButton {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.5rem;
+  padding: 3px;
   border: none;
   background: transparent;
   color: var(--ifm-font-color-base);
@@ -30,8 +31,8 @@
 }
 
 .globeIcon {
-  width: 16px;
-  height: 16px;
+  width: 26px;
+  height: 26px;
   flex-shrink: 0;
   opacity: 0.8;
 }
@@ -41,11 +42,12 @@
   text-align: center;
   font-weight: 600;
   letter-spacing: 0.025em;
+  font-size: 16px;
 }
 
 .chevronIcon {
-  width: 12px;
-  height: 12px;
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
   opacity: 0.6;
   transition: transform 0.2s ease;
diff --git a/src/components/MobileSideBarMenu/styles.module.scss b/src/components/MobileSideBarMenu/styles.module.scss
@@ -234,8 +234,9 @@
 }
 
 .iconClose {
-    padding: 0.3rem 0.5rem !important;
+    padding: 1px;
     border-radius: 6px;
+    display: flex;
 }
 
 .iconClose:hover {

Original file line number	Diff line number	Diff line change
`@@ -234,8 +234,9 @@`
`234`	`234`	`}`
`235`	`235`
`236`	`236`	`.iconClose {`
`237`		`- padding: 0.3rem 0.5rem !important;`
	`237`	`+ padding: 1px;`
`238`	`238`	`border-radius: 6px;`
	`239`	`+ display: flex;`
`239`	`240`	`}`
`240`	`241`
`241`	`242`	`.iconClose:hover {`