[provider ui] initiate move to dark "mode"

provider-ui/components/Footer.js

@@ -1,47 +1,51 @@
-import React, { Fragment } from 'react'
-import { styled } from '@mui/material/styles'
-import Paper from '@mui/material/Paper'
-import NoSsr from '@mui/material/NoSsr'
-import Typography from '@mui/material/Typography'
-import FavoriteIcon from '@mui/icons-material/Favorite'
-
+import React, { Fragment } from "react";
+import { NoSsr } from '@layer5/sistent'
+import { FavoriteIcon, Typography, Paper, styled, accentGrey } from "@layer5/sistent";
 const Item = styled(Paper)(({ theme }) => ({
-  backgroundColor : theme.palette.background.paper,
+  backgroundColor : accentGrey[20],
   padding : theme.spacing(2),
-  color : '#737373',
-  border : '0'
-}))
+  color : theme.palette.background.secondary,
+  minWidth : "100%",
+  border : "0",
+}));
+
+const ClickableSpan = styled("span")(({ theme }) => ({
+  cursor : "pointer",
+  display : "inline",
+  verticalAlign : "middle",
+  color : theme.palette.text.disabled,
+}));
+
+const StyledFavoriteIcon = styled(FavoriteIcon)(({ theme }) => ({
+  display : "inline",
+  verticalAlign : "top",
+  color : theme.palette.icon.brand,
+}));
 
 export default function Footer() {
   const handleL5CommunityClick = () => {
-    if (typeof window !== 'undefined') {
-      const w = window.open('https://layer5.io', '_blank')
-      w.focus()
+    if (typeof window !== "undefined") {
+      const w = window.open("https://layer5.io", "_blank");
+      w.focus();
     }
-  }
+  };
 
   return (
     <Fragment>
       <NoSsr>
         <Item component="footer" square variant="outlined">
-          <Typography variant="body2" align="center" color="textSecondary" component="p">
-            <span onClick={handleL5CommunityClick} style={{
-              cursor : 'pointer',
-              display : 'inline',
-              verticalAlign : 'middle'
-            }}>
-              Built with
-              {' '}
-              <FavoriteIcon sx={{
-                display : 'inline',
-                verticalAlign : 'top'
-              }} />
-              {' '}
-              by the Layer5 Community
-            </span>
+          <Typography
+            variant="body2"
+            align="center"
+            color="textSecondary"
+            component="p"
+          >
+            <ClickableSpan onClick={handleL5CommunityClick}>
+              Built with <StyledFavoriteIcon /> by the Layer5 Community
+            </ClickableSpan>
           </Typography>
         </Item>
       </NoSsr>
     </Fragment>
-  )
+  );
 }

provider-ui/components/Provider.js

@@ -9,23 +9,27 @@ import {
   MenuProviderDisabled,
   CustomDialogActions,
   LearnMore,
+  CustomTypography,
+  StyledPopover,
 } from "./Provider.style";
-import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import Divider from "@mui/material/Divider";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import Popover from "@mui/material/Popover";
-import MenuList from "@mui/material/MenuList";
-import MenuItem from "@mui/material/MenuItem";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import CircularProgress from "@mui/material/CircularProgress";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import CloseIcon from "@mui/icons-material/Close";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
+import {
+  Button,
+  ButtonGroup,
+  Divider,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  MenuList,
+  MenuItem,
+  Tooltip,
+  Typography,
+  IconButton,
+  CircularProgress,
+  styled,
+  charcoal,
+  accentGrey,
+} from "@layer5/sistent";
+import { CloseIcon, ClickAwayListener, DropDownIcon } from "@layer5/sistent";
 function CustomDialogTitle(props) {
   const { children, onClose, ...other } = props;
 
@@ -54,7 +58,39 @@ CustomDialogTitle.propTypes = {
   children : PropTypes.node,
   onClose : PropTypes.func.isRequired,
 };
+//Styled-components:
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  fontWeight : 500,
+  color : charcoal[100],
+  marginBottom : theme.spacing(2), // Equivalent to `gutterBottom`
+}));
+const StyledTooltip = styled(Tooltip)(({ theme }) => ({
+  color : theme.palette.icon.brand,
+  cursor : "pointer",
+  fontWeight : 700,
+}));
+
+const StyledCustomDialogTitle = styled(CustomDialogTitle)(({ theme }) => ({
+  background : theme.palette.background.tabs,
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  backgroundColor : theme.palette.background.tertiary,
+}));
+const StyledButtonGroup = styled(ButtonGroup)(() => ({
+  border : "none",
+  "& .MuiButtonGroup-grouped" : {
+    border : "none !important",
+  },
+}));
 
+const StyledDialogBox = styled(DialogContentText)(({ theme }) => ({
+  color : theme.palette.text.default,
+}));
+
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  backgroundColor : theme.palette.background.elevatedComponents,
+}));
 export default function Provider() {
   const [anchorEl, setAnchorEl] = useState(null);
   const [availableProviders, setAvailableProviders] = useState({});
@@ -98,7 +134,7 @@ export default function Provider() {
       },
       (error) => {
         console.log(`there was an error fetching providers: ${error}`);
-      },
+      }
     );
   }
 
@@ -109,7 +145,7 @@ export default function Provider() {
     setIsLoading(true);
     const existingQueryString = window.location.search;
     const existingQueryParams = new URLSearchParams(existingQueryString);
-    existingQueryParams.append("provider", encodeURIComponent(provider))
+    existingQueryParams.append("provider", encodeURIComponent(provider));
     window.location.href = `/api/provider?${existingQueryParams.toString()}`;
   };
 
@@ -123,26 +159,36 @@ export default function Provider() {
 
   return (
     <ProviderLayout>
-      <MesheryLogo src="/provider/static/img/meshery-logo/meshery-logo-light-text.png" alt="logo" />
+      <MesheryLogo
+        src="/provider/static/img/meshery-logo/meshery-logo-dark-text-noBG.png"
+        alt="logo"
+      />
       <CustomDiv>
         {availableProviders !== "" && (
           <Fragment>
-            <ButtonGroup variant="contained" aria-label="split button" color="primary">
+            <StyledButtonGroup aria-label="split button">
               <Button
                 size="large"
-                aria-describedby={id}
                 variant="contained"
+                aria-describedby={id}
                 onClick={handleClick}
                 aria-label="Select Provider"
                 data-cy="select_provider"
                 disableElevation
               >
-                {isLoading && <CircularProgress size={20} sx={{ color : "white", marginRight : 8 }} />}
-                {selectedProvider !== "" ? selectedProvider : "Select your provider"}
-                <ArrowDropDownIcon />
+                {isLoading && (
+                  <CircularProgress
+                    size={20}
+                    sx={{ color : "white", marginRight : 8 }}
+                  />
+                )}
+                {selectedProvider !== ""
+                  ? selectedProvider
+                  : "Select your provider"}
+                <DropDownIcon />
               </Button>
-            </ButtonGroup>
-            <Popover
+            </StyledButtonGroup>
+            <StyledPopover
               id={id}
               open={open}
               anchorEl={anchorEl}
@@ -157,9 +203,19 @@ export default function Provider() {
               }}
             >
               <ClickAwayListener onClickAway={handleClose}>
-                <MenuList id="split-button-menu" autoFocusItem>
+                <MenuList
+                  sx={{
+                    background : accentGrey[20],
+                    color : charcoal[100],
+                  }}
+                  id="split-button-menu"
+                  autoFocusItem
+                >
                   {Object.keys(availableProviders).map((key) => (
-                    <MenuItem key={key} onClick={(e) => handleMenuItemClick(e, key)}>
+                    <MenuItem
+                      key={key}
+                      onClick={(e) => handleMenuItemClick(e, key)}
+                    >
                       {key}
                     </MenuItem>
                   ))}
@@ -186,36 +242,21 @@ export default function Provider() {
                   </MenuProviderDisabled>
                 </MenuList>
               </ClickAwayListener>
-            </Popover>
+            </StyledPopover>
           </Fragment>
         )}
       </CustomDiv>
       <LearnMore>
-        <Typography variant="h6" sx={{ fontWeight : 500 }} gutterBottom>
+        <StyledTypography variant="h6" gutterBottom>
           Learn more about
-          <Tooltip
+          <StyledTooltip
             title="Learn more about providers"
             placement="bottom"
             data-cy="providers-tooltip"
-            sx={{
-              color : "#00B39F",
-              cursor : "pointer",
-              fontWeight : 700,
-            }}
           >
-            <a
-              onClick={handleModalOpen}
-              style={{
-                color : "#00B39F",
-                cursor : "pointer",
-                fontWeight : 700,
-              }}
-            >
-              {" "}
-              providers{" "}
-            </a>
-          </Tooltip>
-        </Typography>
+            <a onClick={handleModalOpen}> providers </a>
+          </StyledTooltip>
+        </StyledTypography>
       </LearnMore>
       <CustomDialog
         onClose={handleModalClose}
@@ -224,23 +265,31 @@ export default function Provider() {
         disableScrollLock={true}
         data-cy="providers-modal"
       >
-        <CustomDialogTitle id="customized-dialog-title" onClose={handleModalClose} style={{ background : "#eee" }}>
-          <b>Choosing a Provider</b>
-        </CustomDialogTitle>
-        <DialogContent dividers>
-          <DialogContentText id="customized-dialog-content">
-            Login to Meshery by choosing from the available providers. Providers extend Meshery by offering various
-            plugins and services, including identity services, long-term persistence, advanced performance analysis,
-            multi-player user collaboration, and so on.
+        <StyledCustomDialogTitle
+          id="customized-dialog-title"
+          onClose={handleModalClose}
+        >
+          <CustomTypography>Choosing a Provider</CustomTypography>
+        </StyledCustomDialogTitle>
+        <StyledDialogContent dividers>
+          <StyledDialogBox id="customized-dialog-content">
+            Login to Meshery by choosing from the available providers. Providers
+            extend Meshery by offering various plugins and services, including
+            identity services, long-term persistence, advanced performance
+            analysis, multi-player user collaboration, and so on.
             <h3>Available Providers</h3>
             {Object.keys(availableProviders).map((key) => {
               return (
                 <React.Fragment key={availableProviders[key].provider_name}>
-                  <p style={{ fontWeight : 700 }}>{availableProviders[key].provider_name}</p>
+                  <p style={{ fontWeight : 700 }}>
+                    {availableProviders[key].provider_name}
+                  </p>
                   <ul>
-                    {availableProviders[key].provider_description?.map((desc, i) => (
-                      <li key={`desc-${i}`}>{desc}</li>
-                    ))}
+                    {availableProviders[key].provider_description?.map(
+                      (desc, i) => (
+                        <li key={`desc-${i}`}>{desc}</li>
+                      )
+                    )}
                   </ul>
                 </React.Fragment>
               );
@@ -253,13 +302,24 @@ export default function Provider() {
             </ul>
             <p style={{ fontWeight : 700 }}>The University of Texas at Austin</p>
             <ul>
-              <li>Academic research and advanced studies by Ph.D. researchers</li>
-              <li>Used by school of Electrical and Computer Engineering (ECE)</li>
+              <li>
+                Academic research and advanced studies by Ph.D. researchers
+              </li>
+              <li>
+                Used by school of Electrical and Computer Engineering (ECE)
+              </li>
             </ul>
-            <p style={{ fontWeight : 700 }}>Cloud Native Computing Foundation Infrastructure Lab</p>
+            <p style={{ fontWeight : 700 }}>
+              Cloud Native Computing Foundation Infrastructure Lab
+            </p>
             <ul>
-              <li>Performance and compatibility-centric research and validation</li>
-              <li>Used by various service meshes and by the Service Mesh Performance project</li>
+              <li>
+                Performance and compatibility-centric research and validation
+              </li>
+              <li>
+                Used by various service meshes and by the Service Mesh
+                Performance project
+              </li>
             </ul>
             <p style={{ fontWeight : 700 }}>HPE Security</p>
             <ul>
@@ -270,8 +330,8 @@ export default function Provider() {
               <li>Identity services</li>
               <li>Bare-metal Kubernetes configuration</li>
             </ul>
-          </DialogContentText>
-        </DialogContent>
+          </StyledDialogBox>
+        </StyledDialogContent>
         <CustomDialogActions>
           <div className="learnmore">
             <a href="https://docs.meshery.io/extensibility/providers">
@@ -280,10 +340,13 @@ export default function Provider() {
             </a>
           </div>
 
-          <Button onClick={handleModalClose} color="primary" data-cy="providers-modal-button-ok" variant="contained">
+          <StyledButton
+            onClick={handleModalClose}
+            data-cy="providers-modal-button-ok"
+          >
             {" "}
             OK
-          </Button>
+          </StyledButton>
         </CustomDialogActions>
       </CustomDialog>
     </ProviderLayout>