fix: manager in dark mode

fix #98

img/chain-plus.svg

@@ -22,7 +22,7 @@
    inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
    id="metadata16"><rdf:RDF><cc:Work
        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
    id="defs14">
 	
 	
@@ -42,8 +42,8 @@
    id="namedview12"
    showgrid="false"
    inkscape:zoom="7.375"
-   inkscape:cx="-10.440678"
+   inkscape:cx="-25.382767"
-   inkscape:cy="22.536696"
+   inkscape:cy="21.85873"
    inkscape:window-x="2079"
    inkscape:window-y="754"
    inkscape:window-maximized="0"
@@ -52,18 +52,18 @@
    inkscape:connector-curvature="0"
    id="path4"
    d="M 1.6106477,14.304691 C 0.37646569,13.696761 -0.23146473,12.202751 0.08110589,10.516091 0.21990279,9.7688085 2.4445395,7.3359764 3.3833617,6.8846089 3.9912922,6.6064599 5.9205691,6.5026398 5.9205691,6.7452568 c 0,0.2259613 -1.2863697,1.3729789 -1.6683388,1.494565 C 4.044035,8.3092203 3.3661509,8.882729 2.7226885,9.5434023 1.6806014,10.638787 1.5762261,10.812006 1.5762261,11.472679 c 0,0.938267 0.6256964,1.563964 1.5817295,1.563964 0.5907196,0 0.8166809,-0.138797 1.8770892,-1.147018 0.6773289,-0.625696 1.2680485,-1.30358 1.3380022,-1.511776 0.121586,-0.40029 1.2508376,-1.6855493 1.494565,-1.6855493 0.2087505,0 0.1743289,1.8071353 -0.034977,2.3623233 -0.243172,0.626807 -2.5027855,2.937498 -3.2156464,3.268389 -0.7467273,0.364759 -2.2762692,0.347548 -3.0063409,-0.01832 z"
-   style="stroke-width:0.55518758" /><path
+   style="stroke-width:0.55518758;fill:#ffffff" /><path
    inkscape:connector-curvature="0"
    id="path6"
    d="M 4.704153,9.9081605 C 4.5131685,9.717176 4.3566056,9.4734487 4.3566056,9.3524178 c 0,-0.1221413 1.0776191,-1.2863697 2.3984104,-2.607161 C 8.752581,4.7465814 9.2056141,4.3818232 9.5353955,4.4684324 10.022295,4.5900185 10.264357,5.0247304 10.091138,5.4760979 9.9173646,5.9102546 5.520834,10.255153 5.2598958,10.255153 5.1383097,10.255708 4.8951376,10.099145 4.704153,9.9081605 Z"
-   style="stroke-width:0.55518758" /><path
+   style="stroke-width:0.55518758;fill:#ffffff" /><path
    inkscape:connector-curvature="0"
    id="path8"
    d="m 8.7020589,7.8578527 c 0,-0.2437273 1.2852593,-1.3729789 1.6849941,-1.494565 0.208751,-0.069398 0.886635,-0.660118 1.512331,-1.3380021 1.007666,-1.0604083 1.147018,-1.2858145 1.147018,-1.8770893 0,-0.9554778 -0.625697,-1.5817294 -1.564519,-1.5817294 -0.660673,0 -0.833336,0.1043752 -1.9292767,1.1470175 C 8.8930435,3.3563917 8.3189795,4.0342757 8.249581,4.2430263 8.127995,4.6249953 6.9804222,5.9108098 6.755016,5.9108098 6.5112887,5.9108098 6.6156639,3.9820881 6.8938129,3.3908133 7.2241496,2.6785076 9.5353955,0.41889409 10.160537,0.17572192 10.872842,-0.08521625 12.315775,-0.03302862 12.993659,0.28009719 14.245052,0.8885828 14.853538,2.3831478 14.540412,4.0859082 14.40106,4.8331907 12.176423,7.2665779 11.238711,7.7185007 10.62967,7.9972048 8.7020589,8.1010249 8.7020589,7.8578527 Z"
-   style="stroke-width:0.55518758" />
+   style="stroke-width:0.55518758;fill:#ffffff" />
 <text
    xml:space="preserve"
-   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.80278206px;line-height:125%;font-family:AnjaliOldLipi;-inkscape-font-specification:AnjaliOldLipi;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.20026076px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.80278206px;line-height:125%;font-family:AnjaliOldLipi;-inkscape-font-specification:AnjaliOldLipi;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.20026076px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
    x="9.0422382"
    y="17.006468"
    id="text4560"><tspan
@@ -71,5 +71,6 @@
      id="tspan4558"
      x="9.0422382"
      y="17.006468"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arimo;-inkscape-font-specification:'Arimo Bold';stroke-width:1.20026076px">+</tspan></text>
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arimo;-inkscape-font-specification:'Arimo Bold';stroke-width:1.20026076px;fill:#ffffff;">+</tspan></text>
+
 </svg>

ts/Manager/App.scss

@@ -1,5 +1,9 @@
 .icon-add-shortcut {
-  background-image: url('../../img/chain-plus.svg');
+  background-image: url('../../img/chain-plus-dark.svg');
+
+  .dark & {
+    background-image: url('../../img/chain-plus.svg');
+  }
 }
 
 .oc-dialog.bbb-dialog {
@@ -37,7 +41,7 @@ pre {
 
 #bbb-warning {
   padding: 1em;
-  background-color: rgb(255, 255, 123);
+  background-color: var(--color-warning);
   display: inline-block;
 
   .icon {
@@ -47,7 +51,7 @@ pre {
 
 #bbb-success {
   padding: 1em;
-  background-color: rgb(176, 252, 132);
+  background-color: var(--color-success);
   display: inline-block;
 
   .icon {
@@ -112,7 +116,7 @@ pre {
   }
 
   th {
-    border-bottom: 1px #ddd solid;
+    border-bottom: 1px var(--color-background-darker) solid;
     cursor: pointer;
 
     .sort_arrow {
@@ -135,20 +139,12 @@ pre {
     }
 
     .action-rename {
-      &::after {
+      .icon-rename {
-        display: inline-block;
-        position: relative;
-        top: 2px;
-        left: 2px;
-        content: '';
-        width: 16px;
-        height: 16px;
-        background: url('../../img/rename.svg') no-repeat center;
         opacity: 0;
+      }
 
-        &:hover {
+      &:hover .icon-rename {
-          opacity: 1;
+        opacity: 1;
-        }
       }
     }
 
@@ -188,21 +184,17 @@ pre {
     height: 20px;
 
     &:active {
-      background-color: rgba(0, 128, 0, 0.445);
+      background-color: var(--color-success);
     }
   }
 
-  .selected-row,
-  .recordings-row {
-    border-left: 3px solid #888;
-  }
-
   .selected-row {
-    background-color: #f0f0f0;
+    background-color: var(--color-background-dark);
   }
 
   .recordings-row {
-    background-color: #f7f7f7;
+    background-color: var(--color-background-hover);
+    box-shadow: inset 0px -5px 7px -7px var(--color-box-shadow);
 
     &> td {
       padding: 0;

ts/Manager/EditableValue.tsx

@@ -51,7 +51,7 @@ const EditableValue: React.FC<EditableValueProps> = ({ setValue, field, value: c
 		return <span>{currentValue}</span>;
 	}
 
-	return <a className="action-rename" onClick={onClick}>{currentValue}</a>;
+	return <a className="action-rename" onClick={onClick}>{currentValue} <span className="icon icon-rename icon-visible"></span></a>;
 };
 
 export default EditableValue;

ts/Manager/RoomRow.tsx

@@ -225,7 +225,7 @@ const RoomRow: React.FC<Props> = (props) => {
 				</td>
 			</tr>
 			{showRecordings && <tr className="recordings-row">
-				<td colSpan={10}>
+				<td colSpan={11}>
 					<table>
 						<tbody>
 							{recordings?.map(recording => <RecordingRow key={recording.id} recording={recording} deleteRecording={deleteRecording} storeRecording={storeRecording} />)}

ts/admin.ts

@@ -9,7 +9,7 @@ $(() => {
 	}
 
 	function generateSuccessElement(message: string) {
-		return $(`<div id="bbb-success"><span class="icon icon-checkmark-color icon-visible"></span> ${message}</div>`);
+		return $(`<div id="bbb-success"><span class="icon icon-checkmark icon-visible"></span> ${message}</div>`);
 	}
 
 	async function checkServer(url: string, secret: string) {