Merge pull request #50 from the-collab-lab/la-responsive-design

Responsive Design

src/App.jsx

@@ -57,7 +57,7 @@ export function App() {
  className: '',
  duration: 5000,
  style: {
- marginBottom: '33px',
+ marginBottom: '9rem',
  background: '#FEFAE0',
  color: '#13310D',
  },

src/components/ListItem.css

@@ -1,5 +1,5 @@
 .ListItem {
- width: 400px;
+ width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
@@ -8,6 +8,12 @@
  background-color: var(--color-accent-primary-alt);
  padding: 1em 0.5em;
  border-radius: 7px;
+ transition: transform 0.2s ease-in-out;
+}
+
+.ListItem:hover {
+ transform: scale(1.05);
+ transition: transform 0.2s ease-in-out;
 }
 
 .ListItem-checkbox {
@@ -17,7 +23,7 @@
 
 .ListItem-label {
  margin-left: 0.2em;
- width: 360px;
+ width: 80%;
 }
 label {
  padding-inline: 0.3em;
@@ -31,12 +37,31 @@ label {
  background-color: var(--color-accent-primary);
 }
 
+.ListItem:has(input[type='checkbox']:focus-visible) {
+ text-decoration: line-through;
+ color: var(--color-accent-primary);
+ border: 2px solid var(--color-text);
+}
+
+.list-item-name {
+ display: block;
+}
+.list-item-urgency {
+ display: block;
+ text-transform: uppercase;
+ font-size: 1.4rem;
+}
+
 .bin {
  cursor: pointer;
  margin-left: auto;
  min-width: 24px;
 }
 
+.bin:hover {
+ color: red;
+}
+
 input[type='checkbox'] {
  position: relative;
  appearance: none;
@@ -49,7 +74,7 @@ input[type='checkbox'] {
  cursor: pointer;
 }
 /* modal.css */
-
+/*
 .btns {
  display: flex;
  justify-content: center;
@@ -66,4 +91,50 @@ input[type='checkbox'] {
 
 .btns button:nth-child(2) {
  margin-left: 2em;
+} */
+.modal-delete {
+ text-align: center;
+ color: #11310d;
+ width: 80vw;
+ max-width: 400px;
+ height: 50vh;
+ max-height: 270px;
+ margin: auto;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ right: 40px;
+ bottom: 40px;
+ border: 2px solid #3f5b37;
+ background: #eef1d8;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ border-radius: 4px;
+ outline: none;
+ padding: 20px;
+}
+
+.modal-delete button {
+ background-color: #3f5b37;
+ color: #fefae0;
+ padding: 0.8rem 1.5rem;
+ border: 2px solid transparent;
+ border-radius: 7px;
+ font-size: 1.5rem;
+ letter-spacing: 0.1rem;
+ text-transform: uppercase;
+ outline: none;
+ margin-right: 20px;
+}
+.modal-delete button:hover,
+.modal-delete button:active {
+ background-color: #11310d;
+ cursor: pointer;
+}
+
+.modal-delete button:focus-visible {
+ background-color: #fefae0;
+ color: #11310d;
+ border: 2px solid #11310d;
+ font-weight: bold;
 }

src/components/ListItem.jsx

@@ -51,17 +51,6 @@ export function ListItem({ name, itemId, dateLastPurchased, urgency }) {
  }
  };
 
- const modalStyle = {
- content: {
- textAlign: 'center',
- color: '#11310d',
- width: '400px',
- height: '270px',
- margin: 'auto',
- },
- overlay: {},
- };
-
  return (
  <li className={`ListItem ${checked ? 'checked' : ''}`}>
  <input
@@ -74,14 +63,15 @@ export function ListItem({ name, itemId, dateLastPurchased, urgency }) {
  />
 
  <label className="ListItem-label" htmlFor={name}>
- {name} - {urgency}
+ <span class="list-item-name">{name}</span>
+ <span class="list-item-urgency">{urgency}</span>
  </label>
 
  <ImBin className="bin" onClick={openModal} />
 
  {/* modal */}
  <Modal
- style={modalStyle}
+ className="modal-delete"
  isOpen={modalStatus}
  onRequestClose={closeModal}
  >

src/index.css

@@ -99,23 +99,6 @@ button:focus-visible {
  font-weight: bold;
 }
 
-.switch-btn {
- background: none;
- margin-top: 0;
- text-transform: none;
- color: var(--color-text);
- font-family: Poppins, arial, sans-serif;
- font-size: 1.45em;
- flex: 0 1 auto;
- padding: 0.8rem;
- text-align: center;
- text-decoration: none;
- outline: none;
-}
-.switch-btn:hover {
- background-color: initial;
-}
-
 input[type='text'] {
  border: 2px solid var(--color-accent-primary);
  border-radius: 7px;
@@ -129,5 +112,5 @@ input[type='text'] {
 input[type='text']:focus,
 input[type='text']:active {
  border: 2px solid var(--color-text);
- background-color: var(--lm-light-green);
+ background-color: var(--color-accent-secondary-alt);
 }

src/views/Layout.css

@@ -22,16 +22,22 @@
 .Layout-header {
  background-color: var(--color-accent-primary);
  position: sticky;
- text-align: center;
  top: 0;
+ min-height: 7rem;
+ display: flex;
+ align-items: center;
+ text-align: left;
+ width: 100%;
 }
 .Layout-header h1 {
  color: var(--color-text);
- margin: 1rem 0;
+ margin: 1rem;
+ font-size: 2rem;
 }
+
 #dark-mode-switcher {
  position: absolute;
- right: 20px;
+ right: 10px;
  top: 8px;
 }
 
@@ -44,20 +50,21 @@
 }
 
 .Nav {
- align-items: stretch;
  background-color: var(--color-accent-primary);
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
+ align-items: center;
  margin-top: auto;
  position: sticky;
- padding: 1rem;
+ padding: 0;
+ min-height: 7rem;
 }
 
 .Nav-link {
  color: var(--color-text);
- font-size: 1.45em;
+ font-size: 1.2em;
  flex: 0 1 auto;
  padding: 0.8rem;
  text-align: center;
@@ -68,6 +75,50 @@
 .Nav-link.active {
  font-weight: bold;
 }
-.Nav-link:focus-visible {
+.switch-btn {
+ background: none;
+ margin-top: 0;
+ text-transform: none;
+ color: var(--color-text);
+ text-decoration: none;
+ outline: none;
+}
+.switch-btn:hover {
+ background-color: initial;
+}
+
+.Nav-link:focus-visible,
+.switch-btn:focus-visible {
  text-decoration: underline;
+ background-color: initial;
+ border: none;
+ font-weight: bold;
+}
+
+@media (min-width: 400px) {
+ .Layout-header h1 {
+ font-size: 2.5rem;
+ margin: 1rem 1.5rem;
+ }
+ .Nav-link {
+ font-size: 1.45em;
+ }
+ .Nav {
+ align-items: stretch;
+ padding: 1rem;
+ }
+}
+@media (min-width: 600px) {
+ .Layout-header {
+ justify-content: center;
+ }
+ .Layout-header h1 {
+ font-size: 3rem;
+ }
+}
+@media (min-width: 768px) {
+ .Layout-header h1 {
+ text-align: center;
+ font-size: 3rem;
+ }
 }

src/views/Layout.jsx

@@ -4,18 +4,17 @@ import './Layout.css';
 import { DarkMode } from '../components/DarkModeToggle';
 
 export function Layout({ token }) {
-
  const handleSwitchToken = () => {
  localStorage.removeItem('tcl-shopping-list-token');
  window.location.replace('/');
- }
- 
+ };
+
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
  const [isChecked, setChecked] = useState(prefersDarkMode.matches);
  const onChange = () => {
  setChecked((prevChecked) => !prevChecked);
  };
- 
+
  return (
  <>
  <div className="Layout" id={isChecked ? 'theme-dark' : 'theme-light'}>
@@ -31,7 +30,10 @@ export function Layout({ token }) {
  <nav className="Nav">
  {token ? (
  <>
- <button className="switch-btn" onClick={handleSwitchToken}>
+ <button
+ className="switch-btn Nav-link"
+ onClick={handleSwitchToken}
+ >
  Switch List
  </button>
  <NavLink to="/list" className="Nav-link">

src/views/List.css

@@ -1,8 +1,7 @@
 .list-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ width: 95vw;
+ margin: auto;
+ max-width: 600px;
 }
 
 .search-bar {
@@ -13,7 +12,7 @@
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
- width: 350px;
+ width: 100%;
  border-radius: 7px;
 }
 
@@ -35,12 +34,19 @@
  width: 100%;
 }
 
+.token-copy {
+ text-align: center;
+}
 .token-copy p {
  margin-bottom: 0;
 }
 
+.paste-icon:hover {
+ cursor: pointer;
+}
+
 ul {
- width: 80%;
+ width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

src/views/List.jsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { FiSearch } from 'react-icons/fi';
+import { ImPaste } from 'react-icons/im';
 import './List.css';
 
 export function List({ data, token }) {
@@ -56,7 +57,10 @@ export function List({ data, token }) {
  {token}
  </em>
  </CopyToClipboard>{' '}
- to share your shopping list
+ <CopyToClipboard text={token}>
+ <ImPaste className="paste-icon" />
+ </CopyToClipboard>{' '}
+ to share your shopping list{' '}
  </p>
  </div>
  <ul>