more fine-tune adjustments

mui · Jan 3, 2024 · 276f9ec · 276f9ec
1 parent 7795e10
commit 276f9ec
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/docs/pages/experiments/base/components-gallery.tsx b/docs/pages/experiments/base/components-gallery.tsx
@@ -17,8 +17,8 @@ import { Select, SelectRootSlotProps } from '@mui/base/Select';
 import { Option } from '@mui/base/Option';
 import { Slider } from '@mui/base/Slider';
 import { Snackbar } from '@mui/base/Snackbar';
-// TODO: re-export from the @mui/base/Snackbar, if developer only uses the component
-// it is not intuitive to import types from a different module
+// TODO: re-export from the @mui/base/Snackbar, if only using the component
+// it's not intuitive to import types from a different module
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 import { Switch } from '@mui/base/Switch';
 import { TablePagination } from '@mui/base/TablePagination';
@@ -104,7 +104,6 @@ const CopyButton = styled(Button)({
 });
 
 const SettingsButton = styled(Button)({
-  marginTop: '10px',
   display: 'flex',
   alignItems: 'center',
   float: 'right',
@@ -115,6 +114,7 @@ const SettingsPopup = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   width: '250px',
+  marginTop: '12px !important',
 });
 
 export default function ComponentsGallery() {
@@ -410,7 +410,7 @@ export default function ComponentsGallery() {
             Open Popper
           </button>
           <Popper id={id} open={open} anchorEl={anchorEl}>
-            <div className="GalleryPopper">The content of the Popper.</div>
+            <div className="GalleryPopper">Popper content</div>
           </Popper>
         </div>
         <div>
@@ -423,7 +423,7 @@ export default function ComponentsGallery() {
             Open Popup
           </button>
           <Popup id={popupId} open={popupOpen} anchor={popupAnchor}>
-            <div className="GalleryPopup">The content of the Popup.</div>
+            <div className="GalleryPopup">Popup content</div>
           </Popup>
         </div>
         <div>

diff --git a/docs/public/static/components-gallery/base-theme.css b/docs/public/static/components-gallery/base-theme.css
@@ -189,6 +189,8 @@
   height: 100vh;
 }
 
+/* Badge styles */
+
 .GalleryBadge-root {
   font: var(--text-caption);
   margin: 0;
@@ -228,6 +230,8 @@
   vertical-align: middle;
 }
 
+/* Solid button styles */
+
 .GalleryButton {
   font: var(--button-text);
   color: var(--font-color-onDark);
@@ -271,6 +275,8 @@
   scale: 1;
 }
 
+/* Outlined button styles */
+
 .GalleryButtonOutlined {
   font: var(--button-text);
   color: var(--font-color-hard);
@@ -315,6 +321,8 @@
   scale: 1;
 }
 
+/* Plain button styles */
+
 .GalleryButtonPlain {
   font: var(--button-text);
   color: var(--font-color-hard);
@@ -356,6 +364,8 @@
   scale: 1;
 }
 
+/* Input styles */
+
 .GalleryInput .MuiInput-input {
   box-sizing: border-box;
   width: 300px;
@@ -384,12 +394,14 @@
   color: var(--font-color-placeholder);
 }
 
+/* Menu & menu listbox styles */
+
 .GalleryMenu-listbox {
   font: var(--text-body);
   color: var(--GalleryMenu-listbox-color, var(--font-color-soft));
   box-sizing: border-box;
   padding: 6px;
-  margin: 12px 0;
+  margin: 12px;
   min-width: 200px;
   border-radius: var(--border-radius-lg);
   overflow: auto;
@@ -431,6 +443,8 @@
   z-index: 1;
 }
 
+/* Number input styles */
+
 .GalleryNumberInput {
   box-sizing: border-box;
   width: 300px;
@@ -492,18 +506,20 @@
 }
 
 .GalleryNumberInput .btn.increment {
+  height: 21px;
   border-top-left-radius: var(--border-radius-sm);
   border-top-right-radius: var(--border-radius-sm);
   background: var(--bg-default);
   color: var(--font-color-soft);
   border: var(--border-soft);
+  border-bottom: none;
 }
 
 .GalleryNumberInput .btn.increment:hover {
   cursor: pointer;
   color: var(--font-color-onDark);
   background: var(--bg-button);
-  border: var(--border-interactive);
+  /* border: var(--border-interactive); */
 }
 
 .GalleryNumberInput .btn.increment:active {
@@ -512,21 +528,21 @@
 }
 
 .GalleryNumberInput .btn.decrement {
+  height: 21px;
   grid-column: 2/2;
   grid-row: 2/2;
   border-bottom-left-radius: var(--border-radius-sm);
   border-bottom-right-radius: var(--border-radius-sm);
   background: var(--bg-default);
   color: var(--font-color-soft);
   border: var(--border-soft);
-  border-top: 0;
+  border-top: none;
 }
 
 .GalleryNumberInput .btn.decrement:hover {
   cursor: pointer;
   color: var(--font-color-onDark);
   background: var(--bg-button);
-  border: var(--border-interactive);
   border-top: 0;
 }
 
@@ -535,6 +551,8 @@
   background: var(--bg-button-active);
 }
 
+/* Popper & Popup styles */
+
 .GalleryPopper,
 .GalleryPopup {
   font: var(--text-body);
@@ -558,6 +576,8 @@
   box-shadow: var(--shadow-elevation-2);
 }
 
+/* Select & Select listbox styles */
+
 .GallerySelect {
   width: 300px;
   font: var(--text-body);
@@ -664,6 +684,8 @@
   background-color: var(--bg-soft);
 }
 
+/* Slider styles */
+
 .GallerySlider {
   color: var(--bg-highlight);
   height: 6px;
@@ -749,6 +771,8 @@
   }
 }
 
+/* Snackbar styles */
+
 .GallerySnackbar {
   position: fixed;
   z-index: 5500;
@@ -804,6 +828,8 @@
   background: var(--bg-hard);
 }
 
+/* Switch styles */
+
 .GallerySwitch {
   font-size: 0;
   position: relative;
@@ -879,7 +905,7 @@
   margin: 0;
 }
 
-/* Demo's table styles start */
+/* Table pagination styles */
 
 .GalleryTablePaginationDemo th {
   background-color: var(--background-surface-default);
@@ -904,8 +930,6 @@
   background-color: var(--bg-default);
 }
 
-/* Demo's table styles end */
-
 .GalleryTablePagination .MuiTablePagination-spacer {
   display: none;
 }
@@ -989,6 +1013,8 @@
   opacity: 0.3;
 }
 
+/* Tabs styles */
+
 .GalleryTabsList {
   min-width: 300px;
   max-width: 500px;
@@ -1054,6 +1080,8 @@
   border-style: dashed;
 }
 
+/* Textarea styles */
+
 .GalleryTextarea {
   box-sizing: border-box;
   width: 300px;