feat(RadioButton): styles them

src/components/atoms/icons/Radio.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <circle
+      cx="7"
+      cy="7"
+      r="6"
+      stroke="#0C52B4"
+      fill="none"
+      strokeWidth="1"
+    ></circle>
+    <circle
+      cx="7"
+      cy="7"
+      r="4"
+      className="radio-checked"
+      stroke="none"
+      fill="none"
+    ></circle>
+  </svg>
+);

src/components/atoms/icons/index.ts

@@ -19,3 +19,4 @@ export { default as Plus } from './Plus';
 export { default as Pin } from './Pin';
 export { default as Relay } from './Relay';
 export { default as NoNotice } from './NoNotice';
+export { default as Radio } from './Radio';

src/components/molecules/Filters/FiltersCheckboxes.tsx

@@ -28,7 +28,7 @@ export const FiltersListItem = styled.label`
     margin-left: 30px;
   }
 
-  input {
+  svg {
     margin-right: 10px;
   }
 `;

src/components/molecules/Filters/RadiosFilters.tsx

@@ -1,11 +1,21 @@
 import React, { ChangeEvent } from 'react';
 import styled from 'styled-components';
 import { FiltersBar, FiltersList, FiltersListItem } from './FiltersCheckboxes';
+import { Radio } from '../../atoms/icons';
 
 export const TOUS = 'Tous';
 
 const RadioButton = styled.input.attrs({ type: 'radio' })`
   cursor: pointer;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  opacity: 0;
+  
+ &:checked + svg {
+  .radio-checked {
+    fill: ${props => props.theme.activeColor};
+  }
 `;
 
 interface RadiosCheckboxesProps {
@@ -30,6 +40,7 @@ const RadiosFilters = ({
             onChange={onChange}
             defaultChecked
           />
+          <Radio />
           {TOUS}
         </FiltersListItem>
         {!loading &&
@@ -41,6 +52,7 @@ const RadiosFilters = ({
                 value={filterId}
                 onChange={onChange}
               />
+              <Radio />
               {filters[filterId]}
             </FiltersListItem>
           ))}