Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
charlotteconze committed Oct 6, 2024
1 parent 6b2dc5e commit cafd269
Showing 11 changed files with 148 additions and 141 deletions.
Binary file removed app/public/favicon.ico
Binary file not shown.
Binary file removed app/public/logo192.png
Binary file not shown.
Binary file removed app/public/logo512.png
Binary file not shown.
Binary file added app/src/assets/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 6 additions & 4 deletions app/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -7,10 +7,12 @@ const Navbar = (): ReactElement => {
<>
<div className="Navbar">
<div className="Navbar-body">
<div className="Navbar-body-logo">
<span className="Text-color--purple-1000">Flat</span>
<span className="Text-color--yellow-1000">Fare</span>
</div>
<div
onClick={() => {
navigate("/home")
}}
className="Navbar-body-logo"
></div>
<div className="Flex-row Margin-left--auto">
<div
className="Navbar-body-link Margin-right--20"
52 changes: 29 additions & 23 deletions app/src/styles/_components.scss
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
.Navbar {
display: flex;
flex-direction: column;
z-index: var(--fare-z-50);
z-index: var(--pww-z-50);

&-body {
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--fare-color-dark-1000);
background-color: var(--pww-color-light-1000);
padding: 10px 32px;
box-shadow: var(--fare-shadow-dark);
box-shadow: var(--pww-shadow-dark);

&-logo {
font-size: var(--fare-font-size-30);
font-size: var(--pww-font-size-30);
font-weight: 900;
background-image: url('../assets/logo.png');
background-size: contain; /* Ensure the entire logo fits within the defined area */
background-repeat: no-repeat; /* Prevent repeating */
background-position: center; /* Center the logo within its container */
width: 125px;
height: 75px; /* Adjust height based on the image’s aspect ratio */
}

&-link {
color: var(--fare-color-light-1000);
color: var(--pww-color-dark-1000);
cursor: pointer;
font-size: var(--fare-font-size-16);
font-size: var(--pww-font-size-16);

&:hover {
color: var(--fare-color-green-1000);
color: var(--pww-color-teal-1000);
}
}
}
@@ -35,20 +41,20 @@
left: 0;
right: 0;
bottom: 0;
z-index: var(--fare-z-100);
z-index: var(--pww-z-100);
overflow: hidden;
}

.Modal {
position: fixed;
padding: 20px;
width: 400px;
z-index: var(--fare-z-1000);
z-index: var(--pww-z-1000);
top: 10%;
left: 50%;
margin-left: -200px;
background-color: var(--fare-color-light-1000);
border-radius: var(--fare-border-radius-8);
background-color: var(--pww-color-light-1000);
border-radius: var(--pww-border-radius-8);
border: 1px solid rgba(var(--dark), var(--opacity-tint));

&-large {
@@ -62,32 +68,32 @@
justify-content: right;

.Icon {
font-size: var(--fare-font-size-16);
font-size: var(--pww-font-size-16);
margin-left: auto;

&:hover {
cursor: pointer;
color: var(--fare-color-red-1000);
color: var(--pww-color-red-1000);
}
}
}

&-header {
font-size: var(--fare-font-size-24);
font-size: var(--pww-font-size-24);
margin-bottom: 10px;
}

&-subtitle {
color: var(--fare-color-dark-700);
font-size: var(--fare-font-size-16);
border-bottom: 1px solid var(--fare-color-dark-700);
color: var(--pww-color-dark-700);
font-size: var(--pww-font-size-16);
border-bottom: 1px solid var(--pww-color-dark-700);
padding-bottom: 10px;
margin-bottom: 20px;
}

&-content {
border-radius: var(--fare-border-radius-16);
color: var(--fare-color-dark-800);
border-radius: var(--pww-border-radius-16);
color: var(--pww-color-dark-800);
z-index: 5;
height: fit-content;
max-height: 600px;
@@ -103,14 +109,14 @@
width: 70px;
padding-bottom: 5px;
text-align: center;
border-bottom: 1px solid var(--fare-color-light-600);
border-bottom: 1px solid var(--pww-color-light-600);
&-selected {
color: var(--fare-color-light-1000);
border-bottom: 3px solid var(--fare-color-light-1000);
color: var(--pww-color-light-1000);
border-bottom: 3px solid var(--pww-color-light-1000);
}

&:hover {
color: var(--fare-color-light-1000);
color: var(--pww-color-light-1000);
}
}
}
30 changes: 15 additions & 15 deletions app/src/styles/_formik.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.Form {
color: var(--fare-color-dark-900);
color: var(--pww-color-dark-900);

&-container {
width: 100%;
@@ -15,19 +15,19 @@

label {
margin-bottom: 4px;
font-size: var(--fare-font-size-14);
color: var(--fare-color-dark-1000);
font-weight: var(--fare-font-weight-bold);
font-size: var(--pww-font-size-14);
color: var(--pww-color-dark-1000);
font-weight: var(--pww-font-weight-bold);
}

input,
select {
border-radius: var(--fare-border-radius-8);
border-radius: var(--pww-border-radius-8);
border: none;
background-color: var(--fare-color-dark-50);
color: var(--fare-color-dark-700);
background-color: var(--pww-color-dark-50);
color: var(--pww-color-dark-700);
font-family: 'Exo 2', sans-serif;
font-size: var(--fare-font-size-14);
font-size: var(--pww-font-size-14);
padding: 8px;
// width: 100%; // Ensure inputs fit within the container
box-sizing: border-box; // Include padding and border in width calculation
@@ -37,24 +37,24 @@
&-toggle {
cursor: pointer;
margin: -30px 10px 0 auto;
z-index: var(--fare-z-100);
color: var(--fare-color-dark-700);
z-index: var(--pww-z-100);
color: var(--pww-color-dark-700);

&:hover {
color: var(--fare-color-dark-900);
color: var(--pww-color-dark-900);
}
}
}

&-error {
margin-top: 10px;
color: var(--fare-color-red-1000);
font-size: var(--fare-font-size-12);
color: var(--pww-color-red-1000);
font-size: var(--pww-font-size-12);
}

&-success {
margin-top: 10px;
color: var(--fare-color-green-1000);
font-size: var(--fare-font-size-12);
color: var(--pww-color-green-1000);
font-size: var(--pww-font-size-12);
}
}
Loading

0 comments on commit cafd269

Please sign in to comment.