Fix duplicate translations on search, search reset and refactor box-s…

…hadow

lib/graphql/resolvers/translation.ex

@@ -114,6 +114,7 @@ defmodule Accent.GraphQL.Resolvers.Translation do
       |> TranslationScope.parse_empty(args[:is_text_empty])
       |> TranslationScope.parse_commented_on(args[:is_commented_on])
       |> TranslationScope.from_version(args[:version])
+      |> Query.distinct(true)
       |> Query.preload(:revision)
       |> Paginated.paginate(args)
 

webapp/app/pods/components/dashboard-revisions/item/styles.scss

@@ -9,7 +9,7 @@
   margin-right: 10px;
   padding: 8px 15px 12px;
   border-radius: 3px;
-  box-shadow: 0 9px 19px var(--shadow-color);
+  box-shadow: 0 1px 4px var(--shadow-color), 0 9px 19px var(--shadow-color);
 
   &:nth-child(even) {
     flex: 1 1 50%;

webapp/app/pods/components/dashboard-revisions/styles.scss

@@ -112,15 +112,15 @@
   max-width: 340px;
   padding: 15px;
   background: var(--body-background);
-  box-shadow: 0 2px 6px var(--shadow-color);
+  box-shadow: 0 1px 4px var(--shadow-color), 0 7px 12px var(--shadow-color);
   border-radius: 2px;
   color: var(--color-primary);
   text-decoration: none;
   transition: box-shadow 0.2s ease-in-out;
 
   &:hover,
   &:focus {
-    box-shadow: 0 4px 12px rgba(#000, 0.15);
+    box-shadow: 0 3px 10px var(--shadow-color);
   }
 }
 
@@ -196,7 +196,7 @@
 .activities-last-sync {
   font-size: 11px;
   text-decoration: none;
-  opacity: 0.8;
+  opacity: 0.9;
 }
 
 @media (max-width: var(--screen-md)) {

webapp/app/pods/components/project-settings/links-list/styles.scss

@@ -18,7 +18,7 @@
   background: var(--body-background);
   border-radius: 3px;
   color: var(--color-black);
-  box-shadow: 0 9px 19px var(--shadow-color);
+  box-shadow: 0 1px 4px var(--shadow-color), 0 9px 19px var(--shadow-color);
   text-decoration: none;
   font-weight: 600;
   font-size: 13px;

webapp/app/pods/components/revision-selector/styles.scss

@@ -5,17 +5,10 @@
 
   select {
     padding: 10px;
+    padding-bottom: 25px;
     border-radius: 3px;
     font-size: 20px;
     flex-direction: row-reverse;
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-.revision-selector.with-many-revisions {
-  select {
-    padding-bottom: 25px;
     cursor: pointer;
     pointer-events: all;
 

webapp/app/pods/components/revision-selector/template.hbs

@@ -1,20 +1,20 @@
-<div local-class="revision-selector {{if this.hasManyRevisions "with-many-revisions"}}">
-  {{#if @revisions.length}}
-    <div>
-      <AccSelect
-        @searchEnabled={{false}}
-        @selected={{this.revisionValue}}
-        @options={{this.mappedRevisions}}
-        @onchange={{fn this.selectRevision}}
-      />
-      {{#if this.hasManyRevisions}}
+{{#if this.hasManyRevisions}}
+  <div local-class="revision-selector">
+    {{#if @revisions.length}}
+      <div>
+        <AccSelect
+          @searchEnabled={{false}}
+          @selected={{this.revisionValue}}
+          @options={{this.mappedRevisions}}
+          @onchange={{fn this.selectRevision}}
+        />
         <span local-class="otherLanguages">
           {{t
             "components.revision_selector.languages_count"
             count=this.otherRevisionsCount
           }}
         </span>
-      {{/if}}
-    </div>
-  {{/if}}
-</div>
+      </div>
+    {{/if}}
+  </div>
+{{/if}}

webapp/app/pods/components/translation-edit/form/styles.scss

@@ -27,15 +27,16 @@
 }
 
 .label {
-  width: 100%;
-  padding: 5px 5px 5px 8px;
+  display: inline-block;
+  padding: 5px 8px 4px;
+  border-radius: 3px;
   margin-bottom: 5px;
   background: hsl(
     var(--color-blue-hue),
     var(--color-blue-saturation),
     var(--color-highlight-lighteness)
   );
-  font-size: 12px;
+  font-size: 11px;
   color: var(--color-blue);
 }
 

webapp/app/pods/logged-in/project/revision/conflicts/route.ts

@@ -96,7 +96,20 @@ export default class ConflictsRoute extends Route {
     this.router.transitionTo(
       'logged-in.project.revision.conflicts',
       project.id,
-      revisionId
+      revisionId,
+      {
+        queryParams: this.fetchQueryParams(
+          this.controller as ConflictsController
+        ),
+      }
     );
   }
+
+  private fetchQueryParams(controller: ConflictsController) {
+    const query = controller.query;
+
+    return {
+      query,
+    };
+  }
 }

webapp/app/pods/logged-in/project/revision/translations/route.ts

@@ -111,7 +111,20 @@ export default class TranslationsRoute extends Route {
     this.router.transitionTo(
       'logged-in.project.revision.translations',
       project.id,
-      revisionId
+      revisionId,
+      {
+        queryParams: this.fetchQueryParams(
+          this.controller as TranslationsController
+        ),
+      }
     );
   }
+
+  private fetchQueryParams(controller: TranslationsController) {
+    const query = controller.query;
+
+    return {
+      query,
+    };
+  }
 }

webapp/app/styles/html-components/button.scss

@@ -105,7 +105,7 @@
   padding: 5px 12px;
   background: var(--button-background-color);
   border: 1px solid var(--button-border-color);
-  box-shadow: 0 1px 2px var(--shadow-color);
+  box-shadow: 0 1px 2px var(--shadow-color), 0 2px 6px var(--shadow-color);
   text-shadow: 0 1px 1px var(--shadow-color);
   color: var(--button-text-color);
 

webapp/app/styles/html-components/filters.scss

@@ -2,7 +2,7 @@
   padding: 15px;
   border-radius: 0 0 3px 3px;
   background: var(--background-light);
-  box-shadow: 0 9px 19px var(--shadow-color);
+  box-shadow: 0 1px 4px var(--shadow-color), 0 9px 19px var(--shadow-color);
   margin-top: -2px;
 
   &.filters--transparent {

webapp/app/styles/html-components/power-select.scss

@@ -37,6 +37,7 @@
   user-select: none;
   font-size: 13px;
   color: $ember-power-select-text-color;
+  border-radius: 3px;
   cursor: pointer;
 }