fix(panes): unify styles

public/static/css/style.css

@@ -76,7 +76,7 @@ body input {
   border-bottom: solid 1px #e8e8e8;
 }
 
-#panes {
+/* #panes {
   position: fixed;
   left: 0;
   right: 0;
@@ -85,24 +85,18 @@ body input {
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 100;
   overflow: scroll;
-}
+} */
 
-#panes .root-container {
+/* #panes .root-container {
   max-width: 80rem;
   width: 96%;
   z-index: 101;
   text-align: left;
   margin: 3rem auto 8rem auto;
   border-radius: 0.6rem;
-}
+} */
 
-#panes .container {
-  background-color: white;
-  margin: 3rem auto 1rem auto;
-  border-radius: 0.6rem;
-}
-
-#panes .return-btn {
+/* #panes .return-btn {
   position: fixed;
   max-width: 960px;
   width: 96%;
@@ -114,7 +108,7 @@ body input {
   bottom: 3rem;
   height: 3rem;
   border-radius: 0.6rem;
-}
+} */
 
 #op-bar {
   /* width: 96%; */
@@ -655,10 +649,6 @@ div.hr {
   font-size: 1.4rem;
 }
 
-.txt-cap {
-  text-transform: capitalize;
-}
-
 .captcha {
   width: 14rem;
   height: 3rem;

public/static/css/white.css

@@ -1,8 +1,9 @@
-#root-frame {}
+#root-frame {
+}
 
 .theme-default #bg {
   background: url("/static/img/textured_paper.png") repeat fixed center;
-} 
+}
 
 .theme-default #top-bar {
   background: rgba(255, 255, 255, 0.9);
@@ -22,6 +23,40 @@
   min-width: 7rem;
 }
 
+.theme-default #panes {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  overflow: scroll;
+}
+
+.theme-default #root-container {
+  max-width: 80rem;
+  width: 96%;
+  z-index: 101;
+  text-align: left;
+  margin: 3rem auto 8rem auto;
+  border-radius: 0.6rem;
+}
+
+.theme-default #panes #title-container {
+  padding: 2rem;
+}
+
+.theme-default #panes .container {
+  background-color: white;
+  margin: 3rem auto 1rem auto;
+  border-radius: 0.6rem;
+}
+
+.theme-default #panes #title {
+  text-transform: capitalize;
+}
+
 .theme-default .op-bar {
   background: rgba(255, 255, 255, 1);
   box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
@@ -56,7 +91,6 @@
   font-weight: bold;
 }
 
-
 .theme-default .font-xs {
   font-size: 1.2rem;
   line-height: 1.8rem;
@@ -78,7 +112,7 @@
 }
 
 .theme-default .font-xl {
-  font-size: 2.0rem;
+  font-size: 2rem;
   line-height: 3rem;
 }
 

src/client/web/src/components/panes.tsx

@@ -53,19 +53,18 @@ export class Panes extends React.Component<Props, State, {}> {
 
     return (
       <div id="panes" className={displaying === "" ? "hidden" : ""}>
-        <div className="root-container">
-          <div className="container">
+        <div id="root-container">
+          <div id="title-container" className="container">
             <Flexbox
               children={List([
-                <h3 className="flex-list-item-l txt-cap">{title}</h3>,
+                <h3 id="title">{title}</h3>,
                 <button
                   onClick={this.closePane}
-                  className={`red0-bg white-font ${btnClass}`}
+                  className={`${btnClass}`}
                 >
                   {this.props.msg.pkg.get("panes.close")}
                 </button>,
               ])}
-              className="padding-l"
               childrenStyles={List([{}, { justifyContent: "flex-end" }])}
             />
           </div>