From 887136db38c2bca6f787d04ad4c34a6424295f53 Mon Sep 17 00:00:00 2001
From: Anya Stasiuk <stasiukanya@gmail.com>
Date: Mon, 3 Aug 2020 09:15:40 +0300
Subject: [PATCH] fix: make response schema details selectable

---
 src/common-elements/schema.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/common-elements/schema.ts b/src/common-elements/schema.ts
index 7f82805d..d422ba57 100644
--- a/src/common-elements/schema.ts
+++ b/src/common-elements/schema.ts
@@ -1,9 +1,8 @@
 import styled from '../styled-components';
+import { darken } from 'polished';
 
-export const OneOfList = styled.ul`
+export const OneOfList = styled.div`
   margin: 0 0 3px 0;
-  padding: 0;
-  list-style: none;
   display: inline-block;
 `;
 
@@ -15,7 +14,7 @@ export const OneOfLabel = styled.span`
 }
 `;
 
-export const OneOfButton = styled.li<{ active: boolean }>`
+export const OneOfButton = styled.button<{ active: boolean }>`
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 5px;
@@ -23,12 +22,21 @@ export const OneOfButton = styled.li<{ active: boolean }>`
   cursor: pointer;
   border: 1px solid ${props => props.theme.colors.primary.main};
   padding: 2px 10px;
+  line-height: 1.5em;
+  outline: none;
+  &:focus {
+    box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main};
+  }
 
   ${props => {
     if (props.active) {
       return `
       color: white;
       background-color: ${props.theme.colors.primary.main};
+      &:focus {
+        box-shadow: none;
+        background-color: ${darken(0.15, props.theme.colors.primary.main)};
+      }
       `;
     } else {
       return `