Merge branch 'develop' of github.com:AbigailDawson/knownative into al…

…exg/KN-44-login-refactor

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>
   );
 }