theming

front/sass/_dropdown.scss

@@ -64,4 +64,10 @@
     flex-shrink: 0;
 
   }
+}
+
+.editor-field{
+  .dropdown-menu {
+    background: var(--p30);
+  }
 }

front/sass/_revisions.scss

@@ -0,0 +1,87 @@
+.revisions{
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  .revision{
+    justify-content: space-between;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    background: var(--p20);
+    padding: 12px;
+    border-radius: 12px;
+
+    .version{
+      display: flex;
+      gap: 10px;
+    }
+
+    &.active{
+      background: var(--p30);
+    }
+  }
+}
+
+.selected-revision{
+  margin-top: 30px;
+  align-items: center;
+  background: var(--p20);
+  padding: 12px;
+  border-radius: 12px;
+
+  .button{
+    background: var(--p30);
+  }
+
+  .revision-field{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--p30);
+    flex: 1;
+    .compare-left{
+      width: 45%;
+      border-radius: 12px;
+      padding: 20px;
+      background: var(--p30);
+    }
+    .compare-right{
+      width: 45%;
+      border-radius: 12px;
+      padding: 20px;
+      background: var(--p30);
+    }
+    .compare-center{
+
+      width: 10%;
+      height: 100%;
+      display: flex;
+      gap: 20px;
+      align-items: center;
+
+
+    }
+  }
+
+
+}
+.reference-field{
+  width: 100px;
+}
+
+.revision-references{
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--p30);
+}
+
+.reference-compare{
+
+  width: 45%;
+  border-radius: 12px;
+  padding: 20px;
+  background: var(--p30);
+}

front/sass/app.scss

@@ -68,6 +68,7 @@
 @import "./autocomplete";
 @import "./reference-tags";
 @import "./members";
+@import "./revisions";
 
 body {
   background-color: var(--p10);