Feature/implement newest design changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-wa",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "homepage": "https://app.workaround.world",
   "devDependencies": {

src/components/CityImage.jsx

@@ -1,17 +1,17 @@
 const CityImage = ({ city, imageSources }) => {
 	return (
-	<picture>
-			<source type="image/webp" media="(min-width: 56.25rem)" srcSet={imageSources.lWebp} />
-			<source type="image/jpeg" media="(min-width: 56.25rem)" srcSet={imageSources.lJpg} />
-
-			<source type="image/webp" media="(min-width: 37.5rem)" srcSet={imageSources.mWebp} />
-			<source type="image/jpeg" media="(min-width: 37.5rem)" srcSet={imageSources.mJpg} />
-
-			<source type="image/webp" srcSet={imageSources.sWebp} />
-			<source type="image/jpeg" srcSet={imageSources.sJpg} />
-
-			<img className='city-image' src={imageSources.mJpg} alt={city} />
-	</picture>
+		<picture>
+				<source type="image/webp" media="(min-width: 63.25rem)" srcSet={imageSources.lWebp} />
+				<source type="image/jpeg" media="(min-width: 63.25rem)" srcSet={imageSources.lJpg} />
+	
+				<source type="image/webp" media="(min-width: 34rem)" srcSet={imageSources.mWebp} />
+				<source type="image/jpeg" media="(min-width: 34rem)" srcSet={imageSources.mJpg} />
+	
+				<source type="image/webp" srcSet={imageSources.sWebp} />
+				<source type="image/jpeg" srcSet={imageSources.sJpg} />
+	
+				<img className='city-image' src={imageSources.mJpg} alt={city} />
+		</picture>
 	)
 }
 

src/components/FormElement.jsx

@@ -3,7 +3,7 @@ import '../scss/components/form-element.scss'
 const FormElement = ({ className, id, type, label, value, handleChange, disabled }) => {
 	return (
 		<div className='form-element'>
-			<label htmlFor={id}>{label}</label>
+			<label className="form-element-label" htmlFor={id}>{label}</label>
         <input
 					className={className}
           id={id}

src/components/Input.jsx

@@ -1,6 +1,9 @@
-const Input = ({ type, placeholder, onChange, onEnter }) => {
+const Input = ({ type, placeholder, onChange, onEnter, icon }) => {
 	return (
-		<input className='input' type={type} placeholder={placeholder} onChange={onChange} onKeyPress={onEnter} />
+		<div className="input">
+			{icon ? <ion-icon name={icon}></ion-icon> : null}
+			<input className='input-input' type={type} placeholder={placeholder} onChange={onChange} onKeyPress={onEnter} />
+		</div>
 	)
 }
 

src/components/PreviewCityImage.jsx

@@ -1,11 +1,11 @@
 const PreviewCityImage = ({ city, imageSources }) => {
 	return (
-	<picture>
-			<source type="image/webp" srcSet={imageSources.sWebp} />
-			<source type="image/jpeg" srcSet={imageSources.sJpg} />
-
-			<img className='preview-city-image' src={imageSources.sJpg} alt={city} />
-	</picture>
+		<picture>
+				<source type="image/webp" srcSet={imageSources.sWebp} />
+				<source type="image/jpeg" srcSet={imageSources.sJpg} />
+	
+				<img className='preview-city-image' src={imageSources.sJpg} alt={city} />
+		</picture>
 	)
 }
 

src/components/Switch.jsx

@@ -3,7 +3,7 @@ import '../scss/components/switch.scss'
 const Switch = ({ className, id, label, value, handleChange, disabled }) => {
 	return (
 		<div className='form-element'>
-			<label htmlFor={id}>{label}</label>
+			<label className="form-element-label" htmlFor={id}>{label}</label>
 			<label className="switch" htmlFor={id}>
 				<input
 					className={className}

src/index.scss

@@ -52,8 +52,12 @@ h6 {
 }
 
 p,
+a,
 li,
-a {
+span,
+label,
+input,
+button {
   @include t5;
   margin: 0;
 }

src/pages/Articles.jsx

@@ -1,7 +1,9 @@
+import '../scss/pages/articles.scss'
+
 const Articles = () => {
 	return (
 		<section id='articles'>
-			<h1>Articles</h1>
+			<h2>Articles</h2>
 		</section>
 	)
 }

src/pages/Auth.jsx

@@ -79,25 +79,25 @@ const Auth = () => {
       <div className="auth-body">
       <div className="auth-header">
         <Logo width='42' height='40' color='#8423FF' />
-        <h1 className='auth-heading'>{signUpMode ? 'Sign up' : 'Login'}</h1>
+        <h1 className='auth-heading'>{signUpMode ? 'Sign up' : 'Sign in'}</h1>
       </div>
       <div className="auth-form">
         <div className='auth-inputs'>
-          <Input type='email' placeholder='Your email' onChange={(e) => setEmail(e.target.value)} onEnter={(e) => handleEnterPress(e)} />
-          <Input type='password' placeholder='Password' onChange={(e) => setPassword(e.target.value)} onEnter={(e) => handleEnterPress(e)} />
+          <Input type='email' placeholder='Email' icon='mail' onChange={(e) => setEmail(e.target.value)} onEnter={(e) => handleEnterPress(e)} />
+          <Input type='password' placeholder={signUpMode ? 'Password (min. 12 characters)' : 'Password'} icon='lock-closed' onChange={(e) => setPassword(e.target.value)} onEnter={(e) => handleEnterPress(e)} />
           {signUpMode ? 
-            <Input type='password' placeholder='Repeat Password' onChange={(e) => setRepeatedPassword(e.target.value)} onEnter={(e) => handleEnterPress(e)} /> : ''
+            <Input type='password' placeholder='Confirm password' icon='lock-closed' onChange={(e) => setRepeatedPassword(e.target.value)} onEnter={(e) => handleEnterPress(e)} /> : ''
           }
         </div>
-        <Button text={loading ? 'Loading' : signUpMode ? 'Sign Up' : 'Login'} mode='primary' disabled={loading} onClick={e => handlePrimaryButtonClick(e)} />
+        <Button text={loading ? 'Loading' : signUpMode ? 'Sign Up' : 'Sign in'} mode='primary' disabled={loading} onClick={e => handlePrimaryButtonClick(e)} />
         <div className={`auth-error${errorMessage === '' ? ' hidden' : ' visible'}`}>
           <ion-icon name="alert-circle"></ion-icon>
           <p className='auth-error-text'>{errorMessage}</p>
         </div>
       </div>
       </div>
         <div className="auth-footer">
-          <p>{signUpMode ? 'Already have an account? Login ' : 'Don\'t have an account? Sign up '}
+          <p>{signUpMode ? 'Already have an account? Sign in ' : 'Don\'t have an account? Sign up '}
             <button onClick={(e) => {
               e.preventDefault()
               setAuthMode(!signUpMode)

src/pages/Cities.jsx

@@ -130,7 +130,7 @@ const Cities = () => {
 
 	return (
 		<section id='cities'>
-			<h1>Cities</h1>
+			<h2>Cities</h2>
 			<div className='cities-list'>
 				{cities.map((city) => (
 					<City key={city.name} city={city} onToggle={toggleLike} />

src/pages/Home.jsx

@@ -1,7 +1,9 @@
+import '../scss/pages/home.scss'
+
 const Home = () => {
 	return (
 		<section id='home'>
-			<h1>Home</h1>
+			<h2>Home</h2>
 		</section>
 	)
 }

src/pages/Profile.jsx

@@ -97,8 +97,8 @@ const Profile = ({ session }) => {
 
 	return (
 		<section id='profile'>
-			<h1>Profile</h1>
-			<Button text={editing ? 'Save' : loading ? 'Loading' : 'Edit'} mode='primary' onClick={() => handleEditing()} />
+			<h2>Profile</h2>
+			<Button text={editing ? 'Save' : loading ? 'Loading' : 'Edit'} mode={editing ? 'primary' : 'default'} onClick={() => handleEditing()} />
 			<Avatar url={avatar_url} size={150} editing={editing}
 				onUpload={(url) => {
 					setAvatarUrl(url)
@@ -115,7 +115,7 @@ const Profile = ({ session }) => {
 				<Switch className='checkbox' id='open_for_work' label='Open for work?' value={openForWork} handleChange={setOpenForWork} disabled={!editing} />
 				<FormElement className='input' id='bio' type='text' label='About me' value={bio} handleChange={setBio} disabled={!editing} />
 			</div>
-			<Button text='Sign out' mode='danger' onClick={() => supabase.auth.signOut()} />
+			<Button text='Sign out' mode='danger' disabled={editing} onClick={() => supabase.auth.signOut()} />
 		</section>
 	)
 }

src/scss/components/button.scss

@@ -7,14 +7,17 @@
 	height: fit-content;
 	width: fit-content;
 	padding: 6px 16px;
-	background-color: $white;
 	box-shadow: $shadow;
 	border-radius: 6px;
-	color: $gray-700;
 	border: none; 
 	user-select: none;
 	transition: all .2s ease-in-out;
 
+	&:disabled,
+	&[disabled] {
+		opacity: .3;
+	}
+
 	&.btn-sm {
 		@include t6-responsive;
 		padding: 3px 12px;
@@ -24,46 +27,81 @@
 		padding: 10.5px 21px;
 	}
 
-	&:hover {
-		background-color: $gray-700;
-		color: $white;
-		box-shadow: $shadow-hover;
+	&.btn-default {
+		background-color: $white;
+		color: $gray-700;
+
+		&:active {
+			background-color: $gray-700;
+			color: $white;
+			box-shadow: $shadow-hover;
+		}
+
+		@include breakpoint(md) {
+			&:hover {
+				background-color: $gray-700;
+				color: $white;
+				box-shadow: $shadow-hover;
+			}
+		}
 	}
 
 	&.btn-primary {
 		background-color: $primary-500;
 		color: $white;
-
-		&:hover {
+		
+		&:active {
 			background-color: $primary-700;
 		}
+
+		@include breakpoint(md) {
+			&:hover {
+				background-color: $primary-700;
+			}
+		}
 	}
 
 	&.btn-danger {
 		background-color: $white;
 		color: $error-500;
 
-		&:hover {
+		&:active {
 			background-color: $error-500;
 			color: $white;
 		}
+
+		@include breakpoint(md) {
+			&:hover {
+				background-color: $error-500;
+				color: $white;
+			}
+		}
 	}
 
 	&.btn-success {
 		background-color: $white;
 		color: $success-500;
-
-		&:hover {
+		
+		&:active {
 			background-color: $success-500;
 			color: $white;
 		}
-	}
 
-	&:active {
-		filter: brightness(.7);
+		@include breakpoint(md) {
+			&:hover {
+				background-color: $success-500;
+				color: $white;
+			}
+		}
 	}
 
-	&:focus-visible {
-		box-shadow: $shadow-hover;
+	@include breakpoint(md) {
+		&:active {
+			filter: brightness(.7);
+		}
+
+		&:focus-visible {
+			box-shadow: $shadow-hover;
+		}
 	}
 }

src/scss/components/city.scss

@@ -18,6 +18,10 @@ div.city {
 	}
 
 	@include breakpoint(md) {
+		width: 24.3vw;
+	}
+
+	@include breakpoint(lg) {
 		width: 220px;
 	}
 
@@ -68,10 +72,14 @@ div.city {
 		border-radius: 6px 6px 0 0;
 
 		@include breakpoint(sm) {
-			height: 18vw;
+			height: 17.5vw;
 		}
 
 		@include breakpoint(md) {
+			height: 14vw;
+		}
+
+		@include breakpoint(lg) {
 			height: 126px;
 		}
 	}
@@ -85,17 +93,21 @@ div.city {
 		div.city-details {
 			p {
 				@include t5-responsive;
+				white-space: nowrap;
+				max-width: 31vw;
+				overflow-x: hidden;
+				text-overflow: ellipsis;
 
-				&.city-country {
-					color: $gray-500;
-				}
-
 				@include breakpoint(sm) {
 					white-space: nowrap;
 					max-width: 20vw;
 					overflow-x: hidden;
 					text-overflow: ellipsis;
 				}
+
+				&.city-country {
+					color: $gray-500;
+				}
 			}
 		}