component based css

dai-shi · Apr 12, 2020 · 895b672 · 895b672
1 parent 17864b7
commit 895b672
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 108 deletions.
diff --git a/web/src/components/App.css b/web/src/components/App.css
@@ -1,100 +1,5 @@
-.SingleRoomEntrance {
+.App {
   height: 100%;
   margin: 0;
   -webkit-app-region: drag
 }
-
-.error {
-  display: none;
-  position: absolute;
-  z-index: 9999;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: red;
-}
-
-.init {
-  -webkit-app-region: no-drag
-}
-
-.status {
-  background-color: lightyellow;
-  font-size: 8px;
-  font-family: sans-serif;
-  white-space: nowrap;
-  padding-left: 2px;
-}
-
-.card {
-  margin: 0 2px 2px 0;
-  position: relative;
-}
-
-.photo {
-  display: block;
-  width: 36px;
-  height: 36px;
-}
-
-.name {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  color: white;
-  font-size: 8px;
-  line-height: 8px;
-  font-family: sans-serif;
-}
-
-.mesg {
-  position: absolute;
-  top: 8px;
-  left: 42px;
-  font-size: 12px;
-  font-family: sans-serif;
-  white-space: nowrap;
-  -webkit-app-region: no-drag
-}
-
-/* ---------------------------------------------- */
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/web/src/components/App.tsx b/web/src/components/App.tsx
@@ -4,7 +4,7 @@ import SingleRoomEntrance from "./SingleRoomEntrance";
 import "./App.css";
 
 const App: React.FC = () => (
-  <div className="SingleRoomEntrance">
+  <div className="App">
     <SingleRoomEntrance />
   </div>
 );

diff --git a/web/src/components/SingleRoom.css b/web/src/components/SingleRoom.css
@@ -0,0 +1,38 @@
+.SingleRoom-status {
+  background-color: lightyellow;
+  font-size: 8px;
+  font-family: sans-serif;
+  white-space: nowrap;
+  padding-left: 2px;
+}
+
+.SingleRoom-card {
+  margin: 0 2px 2px 0;
+  position: relative;
+}
+
+.SingleRoom-photo {
+  display: block;
+  width: 36px;
+  height: 36px;
+}
+
+.SingleRoom-name {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  color: white;
+  font-size: 8px;
+  line-height: 8px;
+  font-family: sans-serif;
+}
+
+.SingleRoom-mesg {
+  position: absolute;
+  top: 8px;
+  left: 42px;
+  font-size: 12px;
+  font-family: sans-serif;
+  white-space: nowrap;
+  -webkit-app-region: no-drag
+}
diff --git a/web/src/components/SingleRoom.tsx b/web/src/components/SingleRoom.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 
 import { setRoomIdToUrl } from "../utils/url";
 import { useFaceImages } from "../hooks/useFaceImages";
+import "./SingleRoom.css";
 
 const BLANK_IMAGE =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
@@ -33,8 +34,8 @@ const SingleRoom: React.FC<Props> = ({ roomId, userId }) => {
 
   return (
     <>
-      <div className="status">{JSON.stringify(networkStatus)}</div>
-      <div className="room-info">
+      <div className="SingleRoom-status">{JSON.stringify(networkStatus)}</div>
+      <div className="SingleRoom-room-info">
         <div>
           <a href={window.location.href}>Link to this room</a> (Share this with
           your colleagues)
@@ -49,10 +50,14 @@ const SingleRoom: React.FC<Props> = ({ roomId, userId }) => {
         </div>
       </div>
       <div>
-        <div className="card">
-          <img src={myImage || BLANK_IMAGE} className="photo" alt="myself" />
-          <div className="name">{nicknameRef.current}</div>
-          <div className="mesg">
+        <div className="SingleRoom-card">
+          <img
+            src={myImage || BLANK_IMAGE}
+            className="SingleRoom-photo"
+            alt="myself"
+          />
+          <div className="SingleRoom-name">{nicknameRef.current}</div>
+          <div className="SingleRoom-mesg">
             <form>
               <input
                 onChange={(e) => {
@@ -65,12 +70,12 @@ const SingleRoom: React.FC<Props> = ({ roomId, userId }) => {
         {roomImages.map((item) => (
           <div
             key={item.userId}
-            className="card"
+            className="SingleRoom-card"
             style={{ opacity: item.obsoleted ? 0.2 : 1 }}
           >
-            <img src={item.image} className="photo" alt="friend" />
-            <div className="name">{item.info.nickname}</div>
-            <div className="mesg">{item.info.message}</div>
+            <img src={item.image} className="SingleRoom-photo" alt="friend" />
+            <div className="SingleRoom-name">{item.info.nickname}</div>
+            <div className="SingleRoom-mesg">{item.info.message}</div>
           </div>
         ))}
       </div>

diff --git a/web/src/components/SingleRoomEntrance.css b/web/src/components/SingleRoomEntrance.css
@@ -0,0 +1,3 @@
+.SingleRoomEntrance-init {
+  -webkit-app-region: no-drag
+}
diff --git a/web/src/components/SingleRoomEntrance.tsx b/web/src/components/SingleRoomEntrance.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { secureRandomId } from "../utils/crypto";
 import { getRoomIdFromUrl } from "../utils/url";
 import SingleRoom from "./SingleRoom";
+import "./SingleRoomEntrance.css";
 
 const roomIdFromUrl = getRoomIdFromUrl();
 const userId = secureRandomId();
@@ -20,7 +21,7 @@ const SingleRoomEntrance: React.FC = () => {
   }
 
   return (
-    <form className="init" onSubmit={onSubmit}>
+    <form className="SingleRoomEntrance-init" onSubmit={onSubmit}>
       <input type="submit" value="Create a new room" />
     </form>
   );