Merge pull request #540 from codeforpdx/issue-503/pill-buttons

Issue 503/pill buttons
codeforpdx · Nov 26, 2023 · 8586b51 · 8586b51
2 parents aabe27f + 755ee2c
commit 8586b51
Show file tree

Hide file tree

Showing 16 changed files with 65 additions and 210 deletions.
diff --git a/src/components/Home/HomeSection.jsx b/src/components/Home/HomeSection.jsx
@@ -69,8 +69,7 @@ const HomeSection = ({
         sx={{
           my: '1rem',
           backgroundColor: 'primary.light',
-          width: isReallySmallScreen ? 1 : 1 / 4,
-          borderRadius: '25px'
+          width: isReallySmallScreen ? 1 : 1 / 4
         }}
       >
         {button}

diff --git a/src/components/Messages/MessageButtonGroup.jsx b/src/components/Messages/MessageButtonGroup.jsx
@@ -39,7 +39,6 @@ const MessageButtonGroup = ({ showModal, setShowModal, boxType, setBoxType }) =>
         onClick={() => setShowModal(!showModal)}
         startIcon={<CreateIcon />}
         color="secondary"
-        sx={{ width: isReallySmallScreen ? '200px' : 'default' }}
       >
         New Message
       </Button>

diff --git a/src/components/Messages/MessageFolder.jsx b/src/components/Messages/MessageFolder.jsx
@@ -11,7 +11,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 // Component Imports
 import MessagePreview from './MessagePreview';
-import { PaginationContainer } from './MessageStyles';
+import PaginationContainer from './PaginationStyles';
 import { EmptyListNotification, LoadingAnimation } from '../Notification';
 
 /**
@@ -82,7 +82,10 @@ const MessageFolder = ({ folderType, handleRefresh, loadMessages, messageList =
           variant="contained"
           onClick={() => handleRefresh(folderType)}
           type="button"
-          sx={{ width: '120px', margin: isSmallScreen ? '10px 20px' : '10px' }}
+          sx={{
+            width: '120px',
+            margin: isSmallScreen ? '10px 20px' : '10px'
+          }}
           startIcon={<RotateLeftOutlinedIcon />}
         >
           Refresh

diff --git a/src/components/Messages/MessageStyles.js b/src/components/Messages/MessageStyles.js
diff --git a/src/components/Messages/PaginationStyles.js b/src/components/Messages/PaginationStyles.js
@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+const PaginationContainer = styled.div`
+  .pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    list-style-type: none;
+    gap: 3px;
+  }
+
+  .page-green,
+  .page-red {
+    color: #fff;
+    font-weight: bold;
+    padding: 8px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    cursor: pointer;
+    display: flex;
+  }
+
+  .page-green {
+    background-color: #74b0a8;
+    &:hover {
+      background-color: #017969;
+    }
+  }
+
+  .page-red {
+    background-color: #bf7c84;
+    &:hover {
+      background-color: #961020;
+    }
+  }
+
+  .chevron {
+    margin: 0 1rem;
+  }
+
+  .active-page {
+    background-color: #017969;
+    cursor: default;
+  }
+`;
+
+export default PaginationContainer;
diff --git a/src/components/Modals/AddContactModal.jsx b/src/components/Modals/AddContactModal.jsx
@@ -168,7 +168,6 @@ const AddContactModal = ({ addContact, showAddContactModal, setShowAddContactMod
                 endIcon={<ClearIcon />}
                 onClick={() => setShowAddContactModal(false)}
                 fullWidth
-                sx={{ borderRadius: '20px' }}
               >
                 Cancel
               </Button>
@@ -179,7 +178,6 @@ const AddContactModal = ({ addContact, showAddContactModal, setShowAddContactMod
                 endIcon={<CheckIcon />}
                 type="submit"
                 fullWidth
-                sx={{ borderRadius: '20px' }}
               >
                 Add Contact
               </Button>

diff --git a/src/components/Modals/ConfirmationButton.jsx b/src/components/Modals/ConfirmationButton.jsx
@@ -24,7 +24,6 @@ const ConfirmationButton = ({ title, confirmFunction, processing }) => (
     onClick={confirmFunction}
     disabled={processing}
     fullWidth
-    sx={{ borderRadius: '20px' }}
   >
     {title}
   </Button>

diff --git a/src/components/Modals/ConfirmationModal.jsx b/src/components/Modals/ConfirmationModal.jsx
@@ -88,7 +88,6 @@ const ConfirmationModal = ({
             endIcon={<ClearIcon />}
             onClick={() => setShowConfirmationModal(false)}
             fullWidth
-            sx={{ borderRadius: '20px' }}
           >
             Cancel
           </Button>

diff --git a/src/components/Modals/NewMessageModal.jsx b/src/components/Modals/NewMessageModal.jsx
@@ -216,7 +216,6 @@ const NewMessageModal = ({ showModal, setShowModal, oldMessage = '', toField = '
                 startIcon={<ClearIcon />}
                 onClick={() => setShowModal(false)}
                 fullWidth
-                sx={{ borderRadius: '20px' }}
               >
                 Cancel
               </Button>
@@ -226,7 +225,6 @@ const NewMessageModal = ({ showModal, setShowModal, oldMessage = '', toField = '
                 color="primary"
                 startIcon={<CheckIcon />}
                 fullWidth
-                sx={{ borderRadius: '20px' }}
               >
                 Submit
               </Button>

diff --git a/src/components/Modals/SetAclPermissionsModal.jsx b/src/components/Modals/SetAclPermissionsModal.jsx
@@ -155,7 +155,6 @@ const SetAclPermissionsModal = ({ showModal, setShowModal, dataset }) => {
               startIcon={<ClearIcon />}
               onClick={clearInputFields}
               fullWidth
-              sx={{ borderRadius: '20px' }}
             >
               Cancel
             </Button>
@@ -166,7 +165,6 @@ const SetAclPermissionsModal = ({ showModal, setShowModal, dataset }) => {
               color="primary"
               startIcon={<ShareIcon />}
               fullWidth
-              sx={{ borderRadius: '20px' }}
             >
               {permissionState.permissionType ? `${permissionState.permissionType}` : 'Share'}
             </Button>

diff --git a/src/components/Modals/UploadButtonGroup.jsx b/src/components/Modals/UploadButtonGroup.jsx
@@ -45,7 +45,6 @@ const UploadButtonGroup = ({ file, setFile }) => {
         fullWidth
         required
         startIcon={<SearchIcon />}
-        sx={{ borderRadius: '20px' }}
       >
         Choose file
         <input
@@ -65,7 +64,6 @@ const UploadButtonGroup = ({ file, setFile }) => {
           fullWidth
           required
           startIcon={<PhotoCameraIcon />}
-          sx={{ borderRadius: '20px' }}
         >
           Capture image
           <input type="file" hidden accept="image/*" capture="environment" />

diff --git a/src/components/Modals/UploadDocumentModal.jsx b/src/components/Modals/UploadDocumentModal.jsx
@@ -175,7 +175,6 @@ const UploadDocumentModal = ({ showModal, setShowModal }) => {
                   startIcon={<ClearIcon />}
                   onClick={clearInputFields}
                   fullWidth
-                  sx={{ borderRadius: '20px' }}
                 >
                   Cancel
                 </Button>
@@ -186,7 +185,6 @@ const UploadDocumentModal = ({ showModal, setShowModal }) => {
                   color="primary"
                   startIcon={<FileUploadIcon />}
                   fullWidth
-                  sx={{ borderRadius: '20px' }}
                 >
                   Upload
                 </Button>

diff --git a/src/components/NavBar/NavbarLoggedOut.jsx b/src/components/NavBar/NavbarLoggedOut.jsx
@@ -38,13 +38,7 @@ const NavbarLoggedOut = () => {
           </Link>
           {isSmallScreen ? (
             <>
-              <Button
-                variant="contained"
-                color="secondary"
-                size="large"
-                sx={{ borderRadius: '20px' }}
-                onClick={handleSignIn}
-              >
+              <Button variant="contained" color="secondary" size="large" onClick={handleSignIn}>
                 Sign In
               </Button>
               <SignInModal

diff --git a/src/components/NavBar/OidcLoginComponent.jsx b/src/components/NavBar/OidcLoginComponent.jsx
@@ -111,7 +111,6 @@ const OidcLoginComponent = ({ setShowSignInModal }) => {
             color="error"
             onClick={() => setShowSignInModal(false)}
             fullWidth
-            sx={{ borderRadius: '20px' }}
           >
             Cancel
           </Button>
@@ -123,7 +122,6 @@ const OidcLoginComponent = ({ setShowSignInModal }) => {
           size={isSmallScreen ? '' : 'large'}
           onClick={() => loginHandler()}
           fullWidth={isSmallScreen}
-          sx={{ borderRadius: '20px' }}
         >
           Login
         </Button>