Merge pull request #411 from BIDMCDigitalPsychiatry/funny-memory

Funny memory game changes
BIDMCDigitalPsychiatry · Oct 30, 2024 · 9273de0 · 9273de0
2 parents 39f591f + 74ee600
commit 9273de0
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 11 deletions.
diff --git a/FunnyMemory/src/components/AudioRecorder.tsx b/FunnyMemory/src/components/AudioRecorder.tsx
@@ -88,19 +88,22 @@ const AudioRecorder = ({ ...props }) => {
       <div className="microphone-wrapper">
         <div
           className="mircophone-container"
-          ref={microphoneRef}
+         >
+          <div className="microphone-icon" ref={microphoneRef}
           onClick={(e) => {
             e.stopPropagation();
             handleListing();
           }}
         >
-          <Microphone />
+            <Microphone />
+          </div>
           <div className="microphone-status">
             {isListening ? i18n.t("RECORDING") : i18n.t("START_RECORDING")}
           </div>
           {isListening && (
             <Button
               variant="primary"
+              className="btn-stop"
               onClick={(e) => {
                 e.stopPropagation();
                 stopHandle();

diff --git a/FunnyMemory/src/containers/layout.css b/FunnyMemory/src/containers/layout.css
@@ -8,7 +8,8 @@
 }
 
 body {
-  background: rgba(53, 159, 254, 1) !important;
+  /* background: rgba(53, 159, 254, 1) !important; */
+  background: #f4f4f4 !important;
 }
 
 nav a {
@@ -40,28 +41,33 @@ nav a {
 
 .heading {
   text-align: center;
-  color: rgba(53, 159, 254, 1);
+  background: rgba(53, 159, 254, 1);
   padding: 15px;
-  background: #fff;
+  color: #fff;
 }
 
 .home-link {
   position: absolute;
   right: 0;
-  right: 10px;
-  top: 5px;
+  right: 15px;
+  top: 15px;
+}
+.home-link svg path{
+  fill:#fff;
 }
 
 .game-board {
   color: #fff;
   text-align: center;
 }
-
 .back-link {
   position: absolute;
   left: 0;
-  left: 10px;
-  top: 5px;
+  left: 15px;
+  top: 15px;
+}
+.back-link svg path{
+  fill:#fff;
 }
 
 .btn-primary:hover {
@@ -75,6 +81,12 @@ nav a {
   color: #fff;
   font-size: 20px;  
 }
+.box-game p, .box-game h6{
+  color: #359ffe;
+}
+.box-game p{
+  font-weight: 600;
+}
 .imgOption {
   width: 100%;
   max-width: 400px;
@@ -158,7 +170,7 @@ input[type=checkbox] {
 .timer-div {
   margin-top: 10px;
   min-height: 60px;
-  color: rgb(253, 254, 255);
+  color: #359ffe;
 }
 
 @media only screen and (min-width: 500px) {
@@ -244,4 +256,35 @@ input[type=checkbox] {
     text-align: left;
     margin-left: 37%;
   }
+}
+.microphone-icon{
+  background-color: #ff0000;
+  width: 60px;
+  height: 60px;
+  padding: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+  margin: 50px auto;
+  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.54);
+-moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.54);
+box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.54);
+}
+.microphone-icon svg{
+  width: 80%;
+}
+.microphone-icon svg path{
+  fill:#fff;
+}
+.microphone-status{
+  font-size: 14px;
+  color: #3b3b3b;
+}
+.btn-stop{
+  color: #fff;
+  background-color:#359ffe;
+  padding: 10px 25px;
+  border: 0;
+  border-radius: 25px;
+  margin-top: 16px;
+  font-weight: 600;
 }