fixed much shit

CodeAcademyBerlin · Jul 10, 2023 · 32b8217 · 32b8217
1 parent b66eaac
commit 32b8217
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 49 deletions.
diff --git a/apps/codac-quasseln/src/components/Main-Chat-Components/ConversationBuble.tsx b/apps/codac-quasseln/src/components/Main-Chat-Components/ConversationBuble.tsx
@@ -182,35 +182,11 @@ const ConversationBuble = ({ conversation, setActive }: Props) => {
               : `${kurzeTitle}...`}
           </p>
         </div>
+
         {user?.role?.name === "Mentor" ? (
-          <div className="tooltip">
-            <svg
-              className="pin-icon"
-              onClick={(e: any) => {
-                updatePinned(e, conversation);
-                console.log("click :");
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-              version="1.1"
-              x="0px"
-              y="0px"
-              viewBox="0 0 64 80"
-              enable-background="new 0 0 64 64"
-              height="1.2em"
-              // style={{ border: "2px solid violet" }}
-            >
-              <g>
-                <path
-                  fill="#000000"
-                  d="M62.2,19.3L44.7,1.8c-1.4-1.4-3.6-1.4-4.9,0l-5.6,5.6c-0.7,0.7-1,1.5-1,2.5c0,0.8,0.3,1.7,0.9,2.3l-5.7,5.7   c-1.5-0.3-3.1-0.5-4.7-0.5c-6.2,0-11.9,2.4-16.3,6.8C6,25.4,6,27.6,7.3,29l11.4,11.4L1.8,57.3c-1.4,1.4-1.4,3.6,0,4.9   c0.7,0.7,1.6,1,2.5,1s1.8-0.3,2.5-1l16.9-16.9L35,56.7c0.7,0.7,1.6,1,2.5,1c0.9,0,1.8-0.3,2.5-1c5.5-5.5,7.8-13.4,6.3-21l5.7-5.7   c1.4,1.2,3.5,1.1,4.8-0.2l5.6-5.6c0.7-0.7,1-1.5,1-2.5C63.3,20.9,62.9,20,62.2,19.3z"
-                />
-              </g>
-            </svg>
-            <span className="tooltiptext">Unpin conversation</span>
-          </div>
+          ""
         ) : (
           <svg
-            style={{ border: "5px solid orange" }}
             className="pin-icon"
             xmlns="http://www.w3.org/2000/svg"
             height="1em"
@@ -295,6 +271,7 @@ const ConversationBuble = ({ conversation, setActive }: Props) => {
                   ></input>
                   <div className="flex-start" style={{ margin: "1rem 0" }}>
                     <input
+                      className="form-check-input"
                       type="checkbox"
                       checked={isChecked === true ? true : false}
                       onChange={checkBox}

diff --git a/apps/codac-quasseln/styles/_bootstrap.scss b/apps/codac-quasseln/styles/_bootstrap.scss
@@ -0,0 +1,42 @@
+.form-check-input {
+  margin-right: 0.5em;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: top;
+  background-position: center;
+  border: 2px solid lighten($codac-primary-color, 20%);
+  appearance: none;
+  border-radius: 0.25em;
+  background-color: white;
+
+  &:active {
+    filter: brightness(90%);
+  }
+
+  &:checked {
+    background-color: $codac-primary-color;
+  }
+}
+.form-check-input[type="checkbox"] {
+  border: $border-solid $codac-primary-color;
+
+  &:disabled {
+    opacity: 30%;
+  }
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  }
+
+  &:hover {
+    background-color: lighten($codac-primary-color, 10%);
+  }
+}
+.form-check-input[type="radio"] {
+  border-radius: 50%;
+  background-color: $codac-primary-color;
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
+  }
+}
diff --git a/apps/codac-quasseln/styles/_chatrooms.scss b/apps/codac-quasseln/styles/_chatrooms.scss
@@ -7,7 +7,7 @@
   align-items: center;
   width: fit-content;
   color: white;
-  font-weight: 600;
+  // font-weight: 600;
   border-bottom: $border-solid white;
   .icon path {
     fill: white;
@@ -47,7 +47,6 @@ h1 {
   display: flex;
   flex-direction: column;
   gap: $reg-space;
-  border: 2px solid orange;
 }
 
 ///////////////
@@ -111,9 +110,7 @@ h1 {
       .conversation {
         color: darken($codac-primary-color, 20%);
         background-color: lighten($codac-primary-color, 60%);
-        .pin-icon {
-          transform: rotate(-45deg);
-        }
+
         &.is-inactive {
           background-color: darken($codac-primary-color, 5%);
           color: white;
@@ -446,5 +443,6 @@ h1 {
     border-radius: $border-radius;
     margin: $reg-space 0;
     width: 100%;
+    color: black;
   }
 }
diff --git a/apps/codac-quasseln/styles/globals.css b/apps/codac-quasseln/styles/globals.css
@@ -9,7 +9,6 @@
   width: -moz-fit-content;
   width: fit-content;
   color: white;
-  font-weight: 600;
   border-bottom: 1px solid white;
 }
 .go-to-chat .icon path {
@@ -49,7 +48,6 @@ h1 {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  border: 2px solid orange;
 }
 
 .chat-container {
@@ -105,9 +103,6 @@ h1 {
   color: black;
   background-color: #9bfdf3;
 }
-.chat-container .chat-dashboard-container .pinned-conversations-container .conversation .pin-icon {
-  transform: rotate(-45deg);
-}
 .chat-container .chat-dashboard-container .pinned-conversations-container .conversation.is-inactive {
   background-color: #024b44;
   color: white;
@@ -404,4 +399,46 @@ h1 {
   border-radius: 0.25em;
   margin: 1rem 0;
   width: 100%;
+  color: black;
+}
+
+.form-check-input {
+  margin-right: 0.5em;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: top;
+  background-position: center;
+  border: 2px solid #04c8b4;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 0.25em;
+  background-color: white;
+}
+.form-check-input:active {
+  filter: brightness(90%);
+}
+.form-check-input:checked {
+  background-color: #02645a;
+}
+
+.form-check-input[type=checkbox] {
+  border: 1px solid #02645a;
+}
+.form-check-input[type=checkbox]:disabled {
+  opacity: 30%;
+}
+.form-check-input[type=checkbox]:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+.form-check-input[type=checkbox]:hover {
+  background-color: #039687;
+}
+
+.form-check-input[type=radio] {
+  border-radius: 50%;
+  background-color: #02645a;
+}
+.form-check-input[type=radio]:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
 }/*# sourceMappingURL=globals.css.map */
diff --git a/apps/codac-quasseln/styles/globals.css.map b/apps/codac-quasseln/styles/globals.css.map
diff --git a/apps/codac-quasseln/styles/globals.scss b/apps/codac-quasseln/styles/globals.scss
@@ -1,2 +1,3 @@
 @import "vars";
 @import "chatrooms";
+@import "bootstrap";
diff --git a/packages/codac-sassy/src/stories/bubble/bubble.css b/packages/codac-sassy/src/stories/bubble/bubble.css
@@ -9,7 +9,6 @@
   width: -moz-fit-content;
   width: fit-content;
   color: white;
-  font-weight: 600;
   border-bottom: 1px solid white;
 }
 .go-to-chat .icon path {
@@ -49,7 +48,6 @@ h1 {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  border: 2px solid orange;
 }
 
 .chat-container {
@@ -105,9 +103,6 @@ h1 {
   color: black;
   background-color: #9bfdf3;
 }
-.chat-container .chat-dashboard-container .pinned-conversations-container .conversation .pin-icon {
-  transform: rotate(-45deg);
-}
 .chat-container .chat-dashboard-container .pinned-conversations-container .conversation.is-inactive {
   background-color: #024b44;
   color: white;
@@ -404,6 +399,48 @@ h1 {
   border-radius: 0.25em;
   margin: 1rem 0;
   width: 100%;
+  color: black;
+}
+
+.form-check-input {
+  margin-right: 0.5em;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: top;
+  background-position: center;
+  border: 2px solid #04c8b4;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 0.25em;
+  background-color: white;
+}
+.form-check-input:active {
+  filter: brightness(90%);
+}
+.form-check-input:checked {
+  background-color: #02645a;
+}
+
+.form-check-input[type=checkbox] {
+  border: 1px solid #02645a;
+}
+.form-check-input[type=checkbox]:disabled {
+  opacity: 30%;
+}
+.form-check-input[type=checkbox]:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+.form-check-input[type=checkbox]:hover {
+  background-color: #039687;
+}
+
+.form-check-input[type=radio] {
+  border-radius: 50%;
+  background-color: #02645a;
+}
+.form-check-input[type=radio]:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
 }
 
 .bubble-container {