Update secondary button layout

aelassas · Dec 13, 2024 · d770d20 · d770d20
1 parent f459208
commit d770d20
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 25 deletions.
diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css
@@ -173,11 +173,9 @@ div.checkout div.payment-info div.payment-info-price {
   font-weight: 500;
 }
 
-div.checkout .btn-checkout,
-div.checkout .btn-cancel {
+div.checkout .btn-checkout {
   font-size: 18px;
   line-height: 24px;
-  font-weight: 500;
   border: 0;
   border-radius: 5px;
   color: #fff;
@@ -187,14 +185,19 @@ div.checkout .btn-cancel {
   white-space: nowrap;
   padding: 5px 32px;
   margin-left: 7px;
+  font-weight: 400;
 }
 
 div.checkout .btn-checkout {
-  background: #232323;
+  background-color: #232323;
 }
 
 div.checkout .btn-cancel {
-  background: #999;
+  height: 42px;
+  min-width: 164px;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
 }
 
 .status {

diff --git a/frontend/src/assets/css/common.css b/frontend/src/assets/css/common.css
@@ -22,10 +22,10 @@
   color: #fff !important;
 }
 
-.btn-secondary {
+/* .btn-secondary {
   background-color: #999 !important;
   color: #fff !important;
-}
+} */
 
 .btn-primary:hover,
 .btn-secondary:hover,

diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx
@@ -235,7 +235,7 @@ const Avatar = ({
         <DialogTitle className="dialog-header">{commonStrings.CONFIRM_TITLE}</DialogTitle>
         <DialogContent>{commonStrings.DELETE_AVATAR_CONFIRM}</DialogContent>
         <DialogActions className="dialog-actions">
-          <Button onClick={handleCancelDelete} className="btn-secondary">
+          <Button onClick={handleCancelDelete} className="btn-secondary" variant="outlined" color="primary">
             {commonStrings.CANCEL}
           </Button>
           <Button onClick={handleDelete} className="btn-primary">

diff --git a/frontend/src/components/BookingList.tsx b/frontend/src/components/BookingList.tsx
@@ -558,7 +558,7 @@ const BookingList = ({
         </DialogContent>
         <DialogActions className="dialog-actions">
           {!cancelRequestProcessing && (
-            <Button onClick={handleCloseCancelBooking} variant="contained" className="btn-secondary">
+            <Button onClick={handleCloseCancelBooking} variant="outlined" color="primary" className="btn-secondary">
               {commonStrings.CLOSE}
             </Button>
           )}

diff --git a/frontend/src/components/CarSelectList.tsx b/frontend/src/components/CarSelectList.tsx
@@ -206,7 +206,7 @@ const CarSelectList = ({
           )}
         </DialogContent>
         <DialogActions className="dialog-actions">
-          <Button onClick={handleCloseDialog} variant="contained" className="btn-secondary">
+          <Button onClick={handleCloseDialog} variant="outlined" color="primary" className="btn-secondary">
             {commonStrings.CLOSE}
           </Button>
         </DialogActions>

diff --git a/frontend/src/components/ContactForm.tsx b/frontend/src/components/ContactForm.tsx
@@ -186,7 +186,8 @@ const ContactForm = ({ user, className }: ContactFormProps) => {
             }
           </Button>
           <Button
-            variant="contained"
+            variant="outlined"
+            color="primary"
             className="btn-secondary btn-margin-bottom btn"
             size="small"
             onClick={() => {

diff --git a/frontend/src/components/NotificationList.tsx b/frontend/src/components/NotificationList.tsx
@@ -189,7 +189,7 @@ const NotificationList = ({ user }: NotificationListProps) => {
                         </IconButton>
                       </Tooltip>
                     )}
-                    {/* <Tooltip title={strings.DELETE_ALL}>
+                    <Tooltip title={strings.DELETE_ALL}>
                       <IconButton
                         onClick={() => {
                           setSelectedRows(checkedRows)
@@ -198,7 +198,7 @@ const NotificationList = ({ user }: NotificationListProps) => {
                       >
                         <DeleteIcon />
                       </IconButton>
-                    </Tooltip> */}
+                    </Tooltip>
                   </div>
                 )}
               </div>
@@ -318,7 +318,7 @@ const NotificationList = ({ user }: NotificationListProps) => {
                             </IconButton>
                           </Tooltip>
                         )}
-                        {/* <Tooltip title={commonStrings.DELETE}>
+                        <Tooltip title={commonStrings.DELETE}>
                           <IconButton
                             onClick={() => {
                               setSelectedRows([row])
@@ -327,7 +327,7 @@ const NotificationList = ({ user }: NotificationListProps) => {
                           >
                             <DeleteIcon />
                           </IconButton>
-                        </Tooltip> */}
+                        </Tooltip>
                       </div>
                     </div>
                   </div>
@@ -369,7 +369,8 @@ const NotificationList = ({ user }: NotificationListProps) => {
                   onClick={() => {
                     setOpenDeleteDialog(false)
                   }}
-                  variant="contained"
+                  variant="outlined"
+                  color="primary"
                   className="btn-secondary"
                 >
                   {commonStrings.CANCEL}

diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx
@@ -207,7 +207,7 @@ const Activate = () => {
                 <Button type="submit" className="btn-primary btn-margin btn-margin-bottom" size="small" variant="contained">
                   {reset ? commonStrings.UPDATE : strings.ACTIVATE}
                 </Button>
-                <Button className="btn-secondary btn-margin-bottom" size="small" variant="contained" href="/">
+                <Button className="btn-secondary btn-margin-bottom" size="small" variant="outlined" color="primary" href="/">
                   {commonStrings.CANCEL}
                 </Button>
               </div>

diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -890,7 +890,13 @@ const Checkout = () => {
                     )}
                     <div className="checkout-buttons">
                       {(!clientSecret || payLater) && (
-                        <Button type="submit" variant="contained" className="btn-checkout btn-margin-bottom" size="small" disabled={loading}>
+                        <Button
+                          type="submit"
+                          variant="contained"
+                          className="btn-checkout btn-margin-bottom"
+                          aria-label="Checkout"
+                          disabled={loading}
+                        >
                           {
                             loading
                               ? <CircularProgress color="inherit" size={24} />
@@ -899,9 +905,10 @@ const Checkout = () => {
                         </Button>
                       )}
                       <Button
-                        variant="contained"
+                        variant="outlined"
+                        color="primary"
                         className="btn-cancel btn-margin-bottom"
-                        size="small"
+                        aria-label="Cancel"
                         onClick={async () => {
                           try {
                             if (bookingId && sessionId) {

diff --git a/frontend/src/pages/ForgotPassword.tsx b/frontend/src/pages/ForgotPassword.tsx
@@ -148,7 +148,7 @@ const ForgotPassword = () => {
                   <Button type="submit" className="btn-primary btn-margin btn-margin-bottom" size="small" variant="contained">
                     {strings.RESET}
                   </Button>
-                  <Button className="btn-secondary btn-margin-bottom" size="small" variant="contained" href="/">
+                  <Button className="btn-secondary btn-margin-bottom" size="small" variant="outlined" color="primary" href="/">
                     {commonStrings.CANCEL}
                   </Button>
                 </div>

diff --git a/frontend/src/pages/ResetPassword.tsx b/frontend/src/pages/ResetPassword.tsx
@@ -167,7 +167,7 @@ const ResetPassword = () => {
                 <Button type="submit" className="btn-primary btn-margin btn-margin-bottom" size="small" variant="contained">
                   {commonStrings.UPDATE}
                 </Button>
-                <Button className="btn-secondary btn-margin-bottom" size="small" variant="contained" href="/">
+                <Button className="btn-secondary btn-margin-bottom" size="small" variant="outlined" color="primary" href="/">
                   {commonStrings.CANCEL}
                 </Button>
               </div>

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
@@ -247,7 +247,8 @@ const Settings = () => {
                   {commonStrings.SAVE}
                 </Button>
                 <Button
-                  variant="contained"
+                  variant="outlined"
+                  color="primary"
                   className="btn-secondary btn-margin-bottom"
                   size="small"
                   onClick={(e) => {

diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx
@@ -394,10 +394,10 @@ const SignUp = () => {
                 <SocialLogin />
 
                 <div className="buttons">
-                  <Button type="submit" variant="contained" className="btn-primary btn-margin-bottom" size="small">
+                  <Button type="submit" variant="contained" className="btn-primary btn-margin-bottom">
                     {strings.SIGN_UP}
                   </Button>
-                  <Button variant="contained" className="btn-secondary btn-margin-bottom" size="small" href="/">
+                  <Button variant="outlined" color="primary" className="btn-margin-bottom" href="/">
                     {' '}
                     {commonStrings.CANCEL}
                   </Button>