Merge pull request #159 from AbigailDawson/seannamercedes

refactored DemoStudyText and DemoTranslateText from css to scss files

client/package.json

@@ -13,7 +13,8 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.25.1",
-    "react-tooltip": "^5.27.1"
+    "react-tooltip": "^5.27.1",
+    "sass": "^1.80.7"
   },
   "scripts": {
     "start": "vite",

client/src/DemoPage/DemoMainContent/DemoStudyText/DemoStudyText.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import './DemoStudyText.css';
+import './DemoStudyText.scss';
 import DemoPopup from './components/DemoPopup/DemoPopup';
 import DemoWord from './components/DemoWord/DemoWord';
 import * as demoAPI from '../../../utilities/demo-api';
@@ -99,7 +99,7 @@ export default function DemoStudyText({
   return (
     <>
       <div className="StudyText" ref={containerRef}>
-        <div className="study-text-block">{words}</div>
+        <div className="StudyText__block">{words}</div>
       </div>
       {showPopup && (
         <DemoPopup

client/src/DemoPage/DemoMainContent/DemoStudyText/DemoStudyText.scss

@@ -0,0 +1,31 @@
+.StudyText {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    gap: 2rem;
+    margin: 0 3vmin 0 3vmin;
+    padding: 4vmin 2vmin;
+    color: var(--drk-txt);
+    max-width: 900px;
+
+    &__block {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        padding-top: 4vmin;
+      }
+
+  }
+
+  /* small screens and smaller */
+@media (max-width: 550px) {
+    .TranslateText {
+      padding: 4vmin 0 0 5.5vmin;
+    }
+
+    .study-text-block {
+      margin-left: 20px;
+    }
+  }
+

client/src/DemoPage/DemoMainContent/DemoStudyText/components/DemoPopup/DemoPopup.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import './DemoPopup.css';
+import './DemoPopup.scss';
 
 export default function Popup({ word, popupPosition, saveWord, onClose, checkSaved }) {
   const [popupHeight, setPopupHeight] = useState('15%');
@@ -19,7 +19,7 @@ export default function Popup({ word, popupPosition, saveWord, onClose, checkSav
   }, [onClose]);
 
   useEffect(() => {
-    const popupMeaning = document.querySelector('.popup-meaning');
+    const popupMeaning = document.querySelector('.save-word-popup__meaning');
     const html = popupMeaning.innerHTML;
     const lines = html.split('<br>').length; // count the number of lines by splitting on <br> elements
 
@@ -43,17 +43,17 @@ export default function Popup({ word, popupPosition, saveWord, onClose, checkSav
 
   return (
     <div
-      className="Popup"
+      className="save-word-popup"
       style={{
         left: `${popupPosition[0] + 105}px`,
         top: popupHeight === '11rem' ? `${popupPosition[1] - 100}px` : `${popupPosition[1] - 50}px`,
         height: popupHeight
       }}
       ref={popupRef}>
-      <div className="popup-content">
-        <p className="popup-pinyin">{pinyin}</p>
-        <p className="popup-glyphs">{word.text}</p>
-        <p className="popup-meaning">
+      <div className="save-word-popup__content">
+        <p className="save-word-popup__pinyin">{pinyin}</p>
+        <p className="save-word-popup__glyphs">{word.text}</p>
+        <p className="save-word-popup__meaning">
           {meaning.length > 25 ? (
             <span>
               {meaning.substring(0, meaning.lastIndexOf(' ', 20))}
@@ -66,23 +66,23 @@ export default function Popup({ word, popupPosition, saveWord, onClose, checkSav
         </p>
       </div>
       {!isSaved ? (
-        <button className="save-button" onClick={handleSaveClick}>
+        <button className="save-word-popup__save-button" onClick={handleSaveClick}>
           {' '}
           +{' '}
         </button>
       ) : (
-        <button className="save-button saved-button" disabled="true">
+        <button className="save-word-popup__save-button--saved" disabled="true">
           {' '}
           ✓{' '}
         </button>
       )}
       &nbsp;
       {/* <button className="save-button" onClick={handleSaveClick} disabled={isSaved}> + </button>&nbsp; */}
-      <button className="close-btn" onClick={onClose}>
+      <button className="save-word-popup__close-btn" onClick={onClose}>
         {' '}
         x{' '}
       </button>
-      <div className="popup-arrow" />
+      <div className="save-word-popup__arrow" />
     </div>
   );
 }

client/src/DemoPage/DemoMainContent/DemoStudyText/components/DemoPopup/DemoPopup.scss

@@ -0,0 +1,107 @@
+.save-word-popup {
+    position: absolute;
+    background-color: #effffc;
+    border: 1px solid #bed3d1;
+    border-radius: 1vmin;
+    padding: 1.75vmin 1.5vmin 0 1.5vmin;
+    left: 50%;
+    top: 50%;
+    margin-left: -100px;
+    margin-top: -30px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    min-width: 200px;
+    overflow: visible;
+    z-index: 1;
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      bottom: 0;
+    }
+
+    &__arrow {
+      position: absolute;
+      bottom: 0;
+      left: 20%;
+      margin-bottom: -5px;
+      margin-left: -10px;
+      background-color: #effffc;
+      transform: rotate(45deg);
+      height: 15px;
+      width: 15px;
+      z-index: -1;
+      box-shadow: 2px 2px 2px 0 rgba(178, 178, 178, 0.4);
+    }
+
+    &__glyphs {
+      font-size: 2rem;
+      color: black;
+      font-weight: bold;
+    }
+
+    &__pinyin,
+    .popup-meaning {
+      font-size: 0.9rem;
+      color: var(--drk-txt);
+      margin: 0.5vmin 0;
+    }
+
+    &__close-btn {
+      font-size: 24px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      position: absolute;
+      top: -8px;
+      right: 2px;
+      color: hsl(174, 19%, 69%);
+    }
+
+    &__save-button {
+      background-color: #58bdaa;
+      cursor: pointer;
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+      border-radius: 50%;
+      bottom: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+
+      &--saved {
+        background-color: inherit !important;
+        color: #62bfaf;
+        position: absolute;
+        right: 10px;
+      }
+    }
+
+    &:disabled {
+      /* opacity: 50%; */
+      cursor: auto;
+    }
+
+    @media (max-width: 768px) {
+      &__glyphs {
+        font-size: 1.7rem;
+      }
+    }
+
+    @media (max-width: 550px) {
+      &__glyphs {
+        font-size: 1.5rem;
+      }
+
+      &__pinyin,
+      &__meaning {
+        font-size: 0.8rem;
+      }
+    }
+  }
+