Merge pull request #432 from brave/shields-improvements

Shields improvements
brave · Mar 19, 2019 · 918e857 · 918e857
2 parents 83022ba + aaea9c2
commit 918e857
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/features/shields/display.ts b/src/features/shields/display.ts
@@ -55,6 +55,10 @@ export const SiteInfoText = styled<{}, 'p'>('p')`
   line-height: 27px;
   color: ${palette.grey800};
   margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
 `
 
 export const TotalBlockedStatsNumber = styled<{}, 'h2'>('h2')`

diff --git a/src/features/shields/structure.ts b/src/features/shields/structure.ts
@@ -50,7 +50,7 @@ export const MainToggle = styled<MainToggleProps, 'section'>('section')`
   align-items: ${p => p.status === 'enabled' ? null : 'center'};
   border-bottom: 1px solid rgba(160, 161, 178, 0.15);
 
-  > *:last-child {
+  > ${Toggle} {
     display: flex;
     justify-content: flex-end;
     width: fit-content;
@@ -141,7 +141,14 @@ export const BlockedInfoRowData = styled<BlockedInfoRowDataProps, 'div'>('div')`
   grid-gap: 2px;
   align-items: center;
   pointer-events: ${p => p.disabled && 'none'};
-  opacity: ${p => p.disabled && '0.4'};
+
+  & > * {
+    opacity: ${p => p.disabled && '0.4'};
+  }
+
+  & > ${BlockedInfoRowText} {
+    opacity: 1;
+  }
 
   &:active {
     outline: none;
@@ -270,6 +277,8 @@ export const BlockedListItem = styled<{}, 'li'>('li')`
   box-sizing: border-box;
   padding: 9px 0px;
   line-height: 1;
+  white-space: nowrap;
+  user-select: all;
 `
 
 export const BlockedListItemWithOptions = styled<{}, 'li'>('li')`