Refactor button styles to use outlined variant and adjust properties …

…for consistency across components
aelassas · Dec 25, 2024 · df4a050 · df4a050
1 parent e844a0f
commit df4a050
Show file tree

Hide file tree

Showing 20 changed files with 42 additions and 39 deletions.
diff --git a/frontend/src/assets/css/booking-list.css b/frontend/src/assets/css/booking-list.css
@@ -119,6 +119,7 @@ div.bs-list div.booking-details div.bs-pending {
   background: #FBDCC2;
   color: #EF6C00;
 }
+
 div.bs-list div.booking-details div.bs-deposit {
   background: #CDECDA;
   color: #3CB371;

diff --git a/frontend/src/assets/css/bookings.css b/frontend/src/assets/css/bookings.css
@@ -2,13 +2,8 @@ div.bookings {
   display: flex;
   flex-direction: column;
   align-items: center;
-
   position: absolute;
-  top: 64px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
+  inset: 64px 0 0;
   transform: translate3d(0, 0, 0);
 }
 

diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css
@@ -154,8 +154,7 @@ div.booking div.booking-buttons a {
   float: right;
 }
 
-div.booking .btn-checkout,
-div.booking .btn-cancel {
+div.booking .btn-checkout {
   font-size: 18px;
   line-height: 24px;
   font-weight: 500;
@@ -175,9 +174,17 @@ div.booking .btn-checkout {
 }
 
 div.booking .btn-cancel {
-  background: #999;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 500;
+  height: 42px;
+  min-width: 164px;
 }
 
+/* div.booking .btn-cancel {
+  background: #999;
+} */
+
 /* Device width is less than or equal to 960px */
 
 @media only screen and (width <=960px) {
@@ -205,7 +212,6 @@ div.booking .btn-cancel {
 /* Device width is greater than or equal to 960px */
 
 @media only screen and (width >=960px) {
-
   div.booking .booking-form {
     width: 860px;
     padding: 30px;

diff --git a/frontend/src/assets/css/index.css b/frontend/src/assets/css/index.css
@@ -8,6 +8,6 @@
   visibility: hidden !important;
 } */
 
-.github-fork-ribbon:before {
+.github-fork-ribbon::before {
   background-color: #272727;
 }
diff --git a/frontend/src/assets/css/location-carrousel.css b/frontend/src/assets/css/location-carrousel.css
@@ -2,7 +2,7 @@ div.locations-caroussel .slick-dots {
   bottom: -60px;
 }
 
-div.locations-caroussel .slick-dots li.slick-active button:before {
+div.locations-caroussel .slick-dots li.slick-active button::before {
   color: #1976D2;
 }
 

diff --git a/frontend/src/assets/css/property-list.css b/frontend/src/assets/css/property-list.css
@@ -66,7 +66,6 @@ section.property-list article div.middle-panel div.name {
 }
 
 section.property-list article div.middle-panel div.name h2 {
-  display: inline;
   font-size: 1.8em;
   font-weight: 700;
   text-size-adjust: none;
@@ -118,7 +117,14 @@ section.property-list article div.right-panel div.action {
   flex-direction: column;
 }
 
-section.property-list article .btn {
+section.property-list article .btn-view {
+  height: 42px;
+  font-size: 1.5em;
+  font-weight: 400;
+  padding: 0 2em;
+}
+
+section.property-list article .btn-book {
   border: 0;
   border-radius: 5px;
   color: #fff;
@@ -127,6 +133,7 @@ section.property-list article .btn {
   white-space: nowrap;
   background: #232323;
   font-size: 1.5em;
+  font-weight: 400;
   padding: 0 2em;
 }
 

diff --git a/frontend/src/assets/css/search.css b/frontend/src/assets/css/search.css
@@ -22,12 +22,10 @@ div.properties div.col-1 .map .view-on-map {
   top: 10px;
   right: 10px;
   z-index: 10000;
-
   background-color: #062638;
   color: #fff;
   border: 0;
   padding: 5px 10px;
-
   display: flex;
   flex-direction: row;
   border-radius: 5px;

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 variant="outlined" onClick={handleCancelDelete}>
             {commonStrings.CANCEL}
           </Button>
           <Button onClick={handleDelete} className="btn-primary">

diff --git a/frontend/src/components/BookingList.tsx b/frontend/src/components/BookingList.tsx
@@ -468,8 +468,7 @@ const BookingList = ({
                       && booking.status !== movininTypes.BookingStatus.Cancelled
                       && new Date(booking.from) > new Date() && (
                         <Button
-                          variant="contained"
-                          className="btn-secondary"
+                          variant="outlined"
                           onClick={() => {
                             setSelectedId(booking._id as string)
                             setOpenCancelDialog(true)
@@ -524,7 +523,7 @@ const BookingList = ({
         </DialogContent>
         <DialogActions className="dialog-actions">
           {!cancelRequestProcessing && (
-            <Button onClick={handleCloseCancelBooking} variant="contained" className="btn-secondary">
+            <Button onClick={handleCloseCancelBooking} variant="outlined">
               {commonStrings.CLOSE}
             </Button>
           )}

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

diff --git a/frontend/src/components/NotificationList.tsx b/frontend/src/components/NotificationList.tsx
@@ -372,8 +372,7 @@ const NotificationList = ({ user }: NotificationListProps) => {
                   onClick={() => {
                     setOpenDeleteDialog(false)
                   }}
-                  variant="contained"
-                  className="btn-secondary"
+                  variant="outlined"
                 >
                   {commonStrings.CANCEL}
                 </Button>

diff --git a/frontend/src/components/PropertyList.tsx b/frontend/src/components/PropertyList.tsx
@@ -233,8 +233,8 @@ const PropertyList = ({
                     && (
                       <div className="action">
                         <Button
-                          variant="contained"
-                          className="btn-action btn-margin-bottom btn"
+                          variant="outlined"
+                          className="btn-margin-bottom btn-view"
                           onClick={() => {
                             navigate('/property', {
                               state: {
@@ -251,7 +251,7 @@ const PropertyList = ({
                           !hidePrice && (
                             <Button
                               variant="contained"
-                              className="btn-action btn-margin-bottom btn"
+                              className="btn-margin-bottom btn-book"
                               onClick={() => {
                                 navigate('/checkout', {
                                   state: {

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

diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx
@@ -204,7 +204,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-margin-bottom" size="small" variant="outlined" href="/">
                   {commonStrings.CANCEL}
                 </Button>
               </div>

diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -626,7 +626,7 @@ const Checkout = () => {
                     </Button>
                   )}
                   <Button
-                    variant="contained"
+                    variant="outlined"
                     className="btn-cancel btn-margin-bottom"
                     size="small"
                     onClick={async () => {

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-margin-bottom" size="small" variant="outlined" href="/">
                     {commonStrings.CANCEL}
                   </Button>
                 </div>

diff --git a/frontend/src/pages/ResetPassword.tsx b/frontend/src/pages/ResetPassword.tsx
@@ -163,7 +163,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-margin-bottom" size="small" variant="outlined" href="/">
                   {commonStrings.CANCEL}
                 </Button>
               </div>

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
@@ -185,8 +185,7 @@ const Settings = () => {
                 loggedUser={user}
                 user={user}
                 size="large"
-                // readonly={false}
-                readonly
+                readonly={false}
                 onBeforeUpload={onBeforeUpload}
                 onChange={onAvatarChange}
                 color="disabled"
@@ -246,8 +245,8 @@ const Settings = () => {
                   {commonStrings.SAVE}
                 </Button>
                 <Button
-                  variant="contained"
-                  className="btn-secondary btn-margin-bottom"
+                  variant="outlined"
+                  className="btn-margin-bottom"
                   size="small"
                   onClick={() => {
                     navigate('/')

diff --git a/frontend/src/pages/SignIn.tsx b/frontend/src/pages/SignIn.tsx
@@ -137,7 +137,7 @@ const SignIn = () => {
               <SocialLogin />
 
               <div className="signin-buttons">
-                <Button variant="contained" size="small" href="/sign-up" className="btn-secondary btn-margin btn-margin-bottom">
+                <Button variant="outlined" size="small" href="/sign-up" className="btn-margin btn-margin-bottom">
                   {strings.SIGN_UP}
                 </Button>
                 <Button type="submit" variant="contained" size="small" className="btn-primary btn-margin btn-margin-bottom">

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