Ta css refactor (#51)

* Containers

* Backdrop DONE

* spantree classname added

* spin

* Vg arrow fix (#53)

* right fixed

* jerky but working

* remove transition

* version Increased

Co-authored-by: vedanshgarg <[email protected]>

Author: tavyandy97

content/src/scripts/components/Backdrop/Backdrop.jsx

@@ -4,7 +4,10 @@ import "./styles.css";
 
 function Backdrop({ showSearchbar, setShowSearchbar }) {
   return showSearchbar ? (
-    <div className="backdrop" onClick={() => setShowSearchbar(false)}></div>
+    <div
+      className="spantree-backdrop"
+      onClick={() => setShowSearchbar(false)}
+    ></div>
   ) : null;
 }
 

content/src/scripts/components/Backdrop/styles.css

@@ -1,4 +1,4 @@
-.backdrop {
+.spantree-backdrop {
   width: 100%;
   height: 100%;
   position: fixed;

content/src/scripts/components/Loader/Loader.jsx

@@ -12,7 +12,7 @@ function Loader({ size }) {
         width: size,
         height: size,
       }}
-      className="loader"
+      className="spantree-loader"
     ></div>
   );
 }

content/src/scripts/components/Loader/styles.css

@@ -1,14 +1,14 @@
-.loader {
+.spantree-loader {
   border-color: #f3f3f3;
   border-radius: 50%;
   border-style: solid;
   border-top-color: rgb(237, 153, 44);
-  -webkit-animation: spin 2s linear infinite; /* Safari */
-  animation: spin 2s linear infinite;
+  -webkit-animation: spantree-loader-spin 2s linear infinite; /* Safari */
+  animation: spantree-loader-spin 2s linear infinite;
 }
 
 /* Safari */
-@-webkit-keyframes spin {
+@-webkit-keyframes spantree-loader-spin {
   0% {
     -webkit-transform: rotate(0deg);
   }
@@ -17,7 +17,7 @@
   }
 }
 
-@keyframes spin {
+@keyframes spantree-loader-spin {
   0% {
     transform: rotate(0deg);
   }

content/src/scripts/components/Pane/Pane.jsx

@@ -42,42 +42,48 @@ function Pane({
   const URLDetails = fetchURLDetails();
 
   return (
-    <div className="tree-pane" style={{ width: width + "px" }}>
-      <div className="pane-main">
-        <div className="pane-header">
-          <div className="spread">
-            <div className="pane-details">
+    <div className="spantree-tree-pane" style={{ width: width + "px" }}>
+      <div className="spantree-pane-main">
+        <div className="spantree-pane-header">
+          <div className="spantree-spread">
+            <div className="spantree-pane-details">
               <SVG
                 icon="repo"
                 height="12"
                 style={{ verticalAlign: "middle" }}
               />{" "}
               {URLDetails.dirFormatted}
             </div>
-            <div className="pane-icons">
-              <span onClick={switchTheme} className="close-button">
+            <div className="spantree-pane-icons">
+              <span onClick={switchTheme} className="spantree-close-button">
                 <SVG icon="half" height="9" />
               </span>
-              <span onClick={toggleOpened} className="close-button">
+              <span onClick={toggleOpened} className="spantree-close-button">
                 <SVG icon="close" height="12" />
               </span>
             </div>
           </div>
-          <div className="spread">
-            <div className="pane-details" style={{ width: width - 12 + "px" }}>
+          <div className="spantree-spread">
+            <div
+              className="spantree-pane-details"
+              style={{ width: width - 12 + "px" }}
+            >
               <SVG
                 icon="branch"
                 height="12"
                 style={{ verticalAlign: "middle" }}
               />{" "}
               {URLDetails.branchName}
             </div>
-            <span onClick={setShowSearchbarTrue} className="close-button">
+            <span
+              onClick={setShowSearchbarTrue}
+              className="spantree-close-button"
+            >
               <SVG icon="search" height="9" />
             </span>
           </div>
         </div>
-        <div className="tree-body">
+        <div className="spantree-tree-body">
           {tabId ? (
             <TreeList
               firstPageLoad={firstPageLoad}

content/src/scripts/components/Pane/styles.css

@@ -1,4 +1,4 @@
-.tree-pane {
+.spantree-tree-pane {
   position: fixed;
   display: flex;
   box-sizing: border-box;
@@ -14,13 +14,13 @@
   box-shadow: 2px 0px 8px #00000070;
 }
 
-.pane-main {
+.spantree-pane-main {
   height: 100%;
   width: 100%;
   position: absolute;
 }
 
-.pane-header {
+.spantree-pane-header {
   height: 40px;
   background-color: rgb(77, 61, 146);
   color: white;
@@ -30,29 +30,29 @@
   justify-content: space-around;
 }
 
-.close-button {
+.spantree-close-button {
   cursor: pointer;
   margin: 0 4px;
 }
 
-.spread {
+.spantree-spread {
   display: flex;
   justify-content: space-between;
 }
 
-.tree-body {
+.spantree-tree-body {
   height: 100%;
   width: 100%;
 }
 
-.pane-details {
+.spantree-pane-details {
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-weight: bold;
 }
 
-.pane-icons {
+.spantree-pane-icons {
   min-width: 35px;
 }

content/src/scripts/components/TreeItem/TreeItem.jsx

@@ -103,10 +103,10 @@ function TreeItem({
 
   useEffect(() => {
     if (opening && scrolling) {
-      const treeList = document.querySelector(".tree-list");
+      const treeList = document.querySelector(".spantree-tree-list");
       const openingItem = document.querySelector(".opening");
       document
-        .querySelector(".tree-list")
+        .querySelector(".spantree-tree-list")
         .scrollTo(
           openingItem.offsetLeft - 25,
           openingItem.offsetTop - treeList.clientHeight / 2
@@ -121,34 +121,36 @@ function TreeItem({
   return (
     <li>
       <div
-        className={opening ? "tree-element opening" : "tree-element"}
+        className={
+          opening ? "spantree-tree-element opening" : "spantree-tree-element"
+        }
         onClick={handleClick}
       >
         <div
           className={
             treeItemActive.isItemActive
-              ? "full-width-row active-row"
-              : "full-width-row"
+              ? "spantree-full-width-row spantree-active-row"
+              : "spantree-full-width-row"
           }
         ></div>
-        <div className="tree-icon">
+        <div className="spantree-tree-icon">
           {isTree ? (
             isTree.isOpen ? (
-              <i className="fa fa-chevron-right arrow arrow-down"></i>
+              <i className="tree-arrow-down-icon spantree-arrow"></i>
             ) : (
-              <i className="fa fa-chevron-right arrow"></i>
+              <i className="tree-arrow-right-icon spantree-arrow"></i>
             )
           ) : (
             " "
           )}
         </div>
-        <div className="file-icon">
+        <div className="spantree-file-icon">
           <i className={fileIcons.getClassWithColor(name, isTree)}></i>
         </div>
-        <div className="item-name">{name}</div>
+        <div className="spantree-item-name">{name}</div>
       </div>
       {isTree && isTree.isOpen && (
-        <ul className="child-list">
+        <ul className="spantree-child-list">
           {Object.keys(children).map((key) => (
             <TreeItem
               key={key}

content/src/scripts/components/TreeItem/styles.css

@@ -1,45 +1,41 @@
-.tree-element {
+.spantree-tree-element {
   padding: 2px 15px 2px 0px;
   display: flex;
   height: 24px;
   align-items: center;
   width: max-content;
 }
 
-.child-list {
+.spantree-child-list {
   list-style-type: none;
   padding: 0px 0px 0px 20px;
 }
 
-.tree-icon {
+.spantree-tree-icon {
   width: 16px;
   text-align: center;
-  margin-right: 5px;
+  margin-right: 2px;
   padding-bottom: 2px;
 }
 
-.file-icon {
+.spantree-file-icon {
   width: 22px;
   text-align: left;
 }
 
-.file-icon i {
+.spantree-file-icon i {
   font-style: normal;
 }
 
-.item-name {
+.spantree-item-name {
   width: max-content;
 }
 
-.arrow {
-  transition: all 0.2s;
-}
-
-.arrow-down {
-  transform: rotate(90deg);
+.spantree-arrow {
+  font-style: normal;
 }
 
-.full-width-row {
+.spantree-full-width-row {
   position: absolute;
   height: 24px;
   width: 100%;
@@ -51,16 +47,16 @@
   box-sizing: border-box;
 }
 
-.active-row {
-  border: 3px solid black;
-  background: darkslategrey;
-}
-
-.full-width-row:hover {
+.spantree-full-width-row:hover {
   background: #6464ff;
   cursor: pointer;
 }
 
-.full-width-row:active {
+.spantree-full-width-row:active {
   background: blue;
 }
+
+.spantree-active-row {
+  border: 3px solid black;
+  background: darkslategrey;
+}

content/src/scripts/containers/Resizer/Resizer.jsx

@@ -32,7 +32,7 @@ const Resizer = ({ width, setWidth }) => {
 
   return (
     <div
-      className="resizer"
+      className="spantree-resizer"
       unselectable="on"
       style={{ left: width + "px" }}
       onMouseDown={mouseDownListener}

content/src/scripts/containers/Resizer/styles.css

@@ -1,10 +1,10 @@
-.resizer {
+.spantree-resizer {
   /*background: red;*/
   width: 8px;
   position: relative;
   opacity: 100%;
 }
 
-.resizer:hover {
+.spantree-resizer:hover {
   cursor: col-resize;
 }